webpack 如何编译css、less文件

webpack 如何编译.css、.less

**loader的编译顺序是从右往左，从上往下。**使用样式的话，css-loader和style-loader是必须的依赖包。

css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能；
style-loader将所有的计算后的样式加入页面中；
二者组合可以把样式表嵌入webpack打包后的JS文件中。

1.编译.css文件需要安装 style-loader、css-loader。

  {
          test: /\.css$/,
          use: ['style-loader','css-loader']
 },

2.对于.less文件需要安装less、 less-loader

  {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
 }

对于.sass文件需要安装 sass、sass-loader
详细可参考这篇文章

注意： less-loader的版本不要太高（可以npm i [email protected] -D），否则报错。哪位知道原因的大佬可以告知一下为啥这样。