1.在vue-cli3.0中引入sass
1.1通过npm下载sass
npm install sass-loader --save-dev
npm install node-sass --sava-dev
1.2在.vue文件中的style设置lang="scss"
<style lang="scss">
</style>
2.在vue-cli2.0中引入sass的话,
2.1通过npm下载sass
npm install sass-loader --save-dev
npm install node-sass --sava-dev
2.2在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
2.3在.vue文件中的style设置lang="scss"
<style lang="scss">
</style>
3.在.vue文件中引入外部sass文件
<style lang="scss">
@import "../assets/sass/element.scss";//sass文件的路径
</style>
4.scss文件的编码格式
@charset "utf-8";
5.定义混合指令 @mixin
@mixin button($background: green) {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: red;
background: $background;
}
@mixin text($color:red) {
color:$color
}
@mixin background($back:#58bc58) {
background: $back;
}
@mixin display($display:flex) {
dispaly:flex;
}
6.引用 @mixin(@include 名字)
<style lang="scss">
.ps{
@include button;
}
.color-red{
@include text(#58bc58);
}
</style>