一些工作中用到的小技巧，简单分享

js中操作scss，最近遇到一个需求，需要全局切换主题，网上看了许多教程，感觉几乎和我的项目都不是很适配，最后自己琢磨了一下，就全局scss+js修改scss来操作了，因为公司技术团队比较小，所以也没有验证这个方法是否正确，所以贴出来仅供参考：

新建一个common.scss文件，我用到三个颜色，所以var三个颜色

//主题色
$selectedColor: var(--selectedColor, #cf111b);

//数字颜色
$selectedNumColor: var(--selectedNumColor, #cf111b);

//侧边导航底色
$NavBarBgc: var(--NavBarBgc, #cf111b);

因为我是全局文件都需要变颜色，所以需要用到一个插件：sass-resources-loader 在控制台运行

npm install sass-resources-loader --save-dev

安装完成后，在webpack配置文件中加入以下代码，我的是在vue.config.js中添加

        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
          item
            .use('sass-resources-loader')
            .loader('sass-resources-loader')
            .options({
              // Provide path to the file with resources
              // 要公用的scss的路径
              resources: ['./src/styles/common.scss']
            })
            .end()
        })
      },

添加之后就可以全局使用相关代码片段，方便之后操作相关主题色，

另外我的主页牵涉到一些echarts，地图和一个柱状图，需要一些单独设置的渐变色，所以再切换时存储了一些变量在本地存储localstrong中，方便实用，为了方便加上watch函数，后面又在vuex中存储相关数据，在页面加载时直接监听vuex：

watch：{ '$store.getters.theme': function(newlang){ // 业务代码 } }

这是小弟个人的想法，如果有大佬有好方法希望大佬可以指正，定感谢+感激