1.安装与使用
npm install node-sass@4.14.1 --save-dev
npm install sass-loader@7.3.1 --save-dev
<style scoped lang="scss">
$green:green;
div{
color: $green;
}
</style>
2.引入SCSS全局变量
需要配置vue.config.js,没有这个文件可以新建一个。之后引入scss文件,可多个配置如下:
module.exports = {
css: {
loaderOptions: {
sass: {
data:`@import "@/assets/scss/_handle.scss";@import "@/assets/scss/_global.scss";`
}
}
}
}
引入文件之后就可以在scss文件中写公共的样式、变量,比如在_global.scss文件声明一个红色变量中:
$red:red;
之后再在ndex.vue页面中直接引用红色变量,这样文字的颜色就会变成红色的,注意需要使用scss的页面都要在style标签中添加lang="scss"属性。
<style scoped lang="scss">
div{
color: $red;
}
</style>