在main.js中直接加require(‘./css/base.css’),然后打包会报错,是因为webpack不支持css文件类型,需要依赖loader。
- css-loader 处理css中路径引用等问题
- style-loader 动态把样式写入css
- sass-loader scss编译器
- less-loader less编译器
- postcss-loader scss再处理
一、安装css-loader,style-loader
npm install css-loader style-loader --save-dev
二、使用loader
1.在引入css文件中
require(‘style-loader!css-loader!./css/base.css’);//从右到左执行,必须注意顺序
2.在命令行
//给css绑定
webpack --mode production --module-bind "css=style-loader!css-loader"
注:必须是双引号,单引号会报错。–module-bind是为loader绑定一个扩展
3.在配置webpack
在文件webpack.config.js中配置
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}
总结loader的7种用法:
use:['style-loader','css-loader']
use:[{loader:'style-loader'},{loader:'css-loader'}]
loader:['style-loader','css-loader']
loader: 'style-loader!css-loader'
loaders:['style-loader','css-loader'],
loaders:[{loader:'style-loader'},{loader:'css-loader'}],
loaders: 'style-loader!css-loader',
webpack 根据正则表达式,来确定应该查找哪些文件,并将其提供给指定的 loader。在这种情况下,所有以 .css 结尾的文件,都将被提供给 style-loader 和 css-loader。
Rule.loaders 是 Rule.use 的别名。由于需要支持 Rule.use,此选项已废弃。