学习笔记
分类： web前端
webpack中的加载器，处理样式文件style-loader,css-loader，处理less文件less，less-loader，处理sass文件，sass-loader，node-sass
文章作者：痴迷
一，处理样式文件，css 安装style-loader,css-loader来处理样式文件 1).安装包 npm i......
安装style-loader,css-loader来处理样式文件
1).安装包
npm install style-loader css-loader -D
2).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader']
}
]
}
}
二，处理样式文件，less文件的
安装less,less-loader处理less文件
1).安装包
npm install less-loader less -D
2).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
}
]
}
}
三，处理样式文件，scss的文件的
安装sass-loader,node-sass处理scss文件
1).安装包
npm install sass-loader node-sass -D
2).配置规则：更改webpack.config.js的module中的rules数组
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型，支持正则
test:/\.css$/,
//use表示该文件类型需要调用的loader
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}
]
}
}
×
打赏作者
感谢您的支持，我们会一直保持!
请土豪扫码随意打赏
打开支付宝扫一扫，即可进行扫码打赏哦
分享从这里开始，精彩与您同在
版权所有，转载注意明处：前端笔记 » webpack中的加载器，处理样式文件style-loader,css-loader，处理less文件less，less-loader，处理sass文件，sass-loader，node-sass
