webpack小知识点4-loader-css处理上

 

1.安装css-loader(把css合并到一起)  style-loader(把合并好的css挂载到html 的head中)

npm install css-loader style-loader -D

2.配置（loader加载都是从右向左，从下向上的顺序执行的。先执行css-loader 再执行style-loader）

 

3.文件

4.效果

 5.当有scss或者less这种类型的文件时（以scss为例子）安装sass-loader node-sass

npm install sass-loader node-sass -D

 6.配置

7.新建一个文件index.scss

8.效果

transform这种自动加前缀

1.安装autoprefixer postcss-loader

npm install autoprefixer postcss-loader -D

2.创建文件postcss.config.js（webpackconfig.js同级）,文件内容如下（蓝色部分之前没加一直没有作用，这块不懂，欢迎点评指导 在这里先拜谢）

3.index.scss

4.webpackconfig.js配置

5.效果

ps:给css文件也加上