一、scss资源文件需要在所有组件中共享
如果要在组件中使用，必须导入相应的资源文件。
<template>
<div class="about">
<h1>This is an about page.</h1>
</div>
</template>
<style lang="scss" scoped>
/* 如果没有以下import语句，直接使用$theme变量会报错 */
@import "@/styles/_variables.scss";
h1{
color: $theme;
}
</style>
每个需要用到变量的vue文件都需要做导入操作，简化操作，可以使用sass-resources-loader
参考官网sass-resources-loader。如果使用vue-cli，可以参考vue-cli自动化导入
这里以vue-cli4为例，具体实现如下：
vue add style-resources-loader
/* vue.config.js */
const path = require('path');
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
'patterns': [
path.resolve(__dirname, './src/style/_variables.scss'),
]
},
},
};
注意：Do not include anything that will be actually rendered in CSS, because it will be added to every imported Sass file。即_variables.scss文件里只能包含类似变量、函数、@mixin等不会直接产生css样式的内容，否则同样的css样式会在所有导入该文件的地方添加。
二、把scss的变量与js共享
1.首先，在scss中配置要导出的变量
/* _variables.scss */
$green: #3eaf7c;
:export {
green: $green;
}
2.在vue文件导入变量并使用
<template>
<div class="test">
<h1>This is a test page.</h1>
<!-- 这里的active-color就可以使用引用的variables变量了 -->
<el-switch v-model="value1" :active-color="variables.green"> </el-switch>
</div>
</template>
<script>
/* 引入变量样式文件 */
import variables from '@/style/_variables.scss';
export default {
data() {
return {
value1: true,
variables, // 使用scss的变量
};
},
};
</script>
<style lang="scss" scoped>
h1{
color: $green;
}
</style>
