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;
}
嵌套功能避免了重復(fù)輸入父選擇器，而且令復(fù)雜的 CSS 結(jié)構(gòu)更易于管理
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;
}
