作用
- 预处理器都是需要先把文件转成css再通过css-loader和style-loader转成页面样式。
使用
- scss 需要2个预处理器,node-sass和sass-loader
- less 要less和less-loader
- stylus 要stylus和stylus-loader
- loader是用来调用对应的解析器比如node-sass来解析文件的。
- 以scss为例:
- 首先src下建个myscss.scss和index.js文件,然后index.js文件中导入myscss.scss,给scss文件里写个样式。
- 安装:
npm i node-sass sass-loader -D
- 配置:
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}
]
- 进行测试样式是否会有。
- 注意这里会有点问题:如果一个css文件去引入scss文件,那么文件将解析不出来。比如css文件中
@import'./mystyle.scss'
- 这样我们需要把css-loader中重新设置,变成一个对象,键名为loader和options。
module:{
rules:[
{
test:/\.css$/,
use:['style-loader',{loader:'css-loader',options:{importLoaders:1}},'sass-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}
]
},
- 这个importLoaders代表如果css文件引入别的文件,那么就先用下面的loader处理,1就代表后面跟的那个sass-loader,2的话就可以再配别的,都是从右往左执行。
- 最后测试效果即可成功。