css-loader和style-loader

html-css020

css-loader和style-loader,第1张

1.开发环境安装css-loader

2.在webpack.config.js中引入css-loader(三种方法)

3.引入后npm run build,仍然无法显示样式,什么原因?

因为没有安装style-loader

1.开发环境安装style-loader

2.在webpack.config.js中引入style-loader

默认规则:引入的loader从下往上,从右往左扫描

3.引入css-loader和style-loader后npm run build,正常显示

css文件中如果有@import 语句,importLoaders的作用是决定@import模块在使用css-loader前,要使用几个其它的loaders处理。

比如文件a.css:

webpack配置:

由于importLoaders为0,所以postcss-loader不处理b.css,只有css-loader处理b.css,如果importLoaders为1,那么postcss-loader,css-loader都会处理b.css。