开发者学堂课程【前端自动化构建工具 Webpack: loader - 配置处理 scss 文件的 loader】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/587/detail/8219
loader - 配置处理 scss 文件的 loader
配置处理 scss 文件的 loader
1.
创建index.scss,在index.scss中写
html
,body{
padding
:0;
margin
:0;
li{
font-size
:12px;
line-height
:30px;
}
}
2.在main.js中写
import
'./css/index.scss'
报错,需要一个合适的loader
3.点击终端
ps C:\Users\liulongbin\Desktop\day5\
代码\webpack-study> npm i sass-loader 需要一个node-sass
ps C:\Users\liulongbin\Desktop\day5\代码\webpack-study> npm i node-sass
{ test
:/ \.css$/,use:['style-loader','css-loader','sass-loader']},
//配置处理scss文件的第三方loader规则
4.重新启动
ps C:\Users\liulongbin\Desktop\day5\代码\webpack-study> npm run dev