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文件也加上