1、安装sass、sass-loader
cnpm install node-sass sass-loader -D
2、配置webpack.base.conf.js
module: {
rules: [
...
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
...
]
}
3、在组件中使用
<style scoped lang="scss">
.box{
width: 100%;
}
</style>
运行项目报错：TypeError: this.getResolve is not a function
微信图片_20190929094831.png
解决办法：降低sass-loader版本
npm uninstall sass-loader
npm install sass-loader@7.3.1 --save-dev
sass的使用：
1、嵌套：
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
编译为
#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理
2、父选择器 &：
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
}
编译为
a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
3、属性嵌套 ：
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
编译为
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
.funky {
font: 20px/24px {
family: fantasy;
weight: bold;
}
}
编译为
.funky {
font: 20px/24px;
font-family: fantasy;
font-weight: bold;
}
变量 $:
//局部变量
$red: #DC143C;
.div{
color: $red;
}
//全局变量
.div{
$blue: #0000CD !global;
color: $blue;
}
.inner{
background: $blue;
}
