解决问题

1.希望设置一个公用sass文件，里面定义一些公用的sass变量值，用于全局的样式统一
2.由于如果需要在vue中使用统一的sass变量就需要每个页面写一次 @import “~@/styles/variables.scss”;希望能够简化该操作
3.希望点击按钮，可以动态修改sass变量值

公用sass文件引入

在vue.config.js 中配置

	config.module
            .rule('scss')
            .oneOfs
            .store
            .forEach(item => {
                item
                    .use('sass-resources-loader')
                    .loader('sass-resources-loader')
                    .options({
                        // 可以放一个数组，或者单独的一个路径 resources: 'src/styles/variables.scss',
                        resources: ['src/styles/variables.scss'] // 你的公用sass路径
                    })
                    .end();
            });

动态修改sass文件中变量

sass文件中把需要动态变化的变量写到：root中

:root {
  --menu-text: rgb(245, 245, 245);
  --sub-menu-text: rgb(245, 245, 245);
}
$menuText:var(--menu-text);
$subMenuActiveText: var(--sub-menu-text);

页面的change事件中

document.getElementsByTagName('body')[0].style.setProperty(‘--menu-text’,‘#bfcbd9’);// 括号里写root中定义的变量和改变后的值

为了方便我直接写了几套颜色统一切换

const greenColors = {
    '--menu-text': 'rgb(245, 245, 245)',
    '--sub-menu-text': 'rgb(245, 245, 245)',
};
const defaultColors = {
    '--menu-text': '#bfcbd9',
    '--sub-menu-text': '#f4f4f5',
};
// change事件
// 参数为‘greenColors ’或者‘defaultColors ’
change(colorObj){
	for (const key in corlorObj) { // 循环取colorObj中的值
        document.getElementsByTagName('body')[0].style.setProperty(key, corlorObj[key]);
    }
}