（配置）vue中scss配置全局变量使用

个人项目地址： SubTopH前端开发个人站

 

（自己开发的前端功能和UI组件，一些有趣的小功能，感兴趣的伙伴可以访问，欢迎提出更好的想法，私信沟通，网站属于静态页面）

SubTopH前端开发个人站https://subtop.gitee.io/subtoph.github.io/#/home

以上 👆 是个人前端项目，欢迎提出您的建议😊

以下vue中scss配置全局变量使用

package.json所需要的依赖

    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",

vue.config.js文件配置（重新启动项目）

module.exports = {
  outputDir: 'dist',
  publicPath: '/',
  // 配置scss文件全局变量
  css: {
    loaderOptions: {
      // 没有分号会报错
      sass: {
        // data: '@import "@/assets/css/vars.scss";' //旧版sass-loader写法(8.0以下)
        prependData: `@import "@/assets/css/base.scss";` //新版scss-loader(8.0及以上)
      }
    }
  },
}

base.scss文件中设置全局变量

$activeColor: #147af7;

其他组件中直接使用

&:hover {
   color: #fff;
   background: $activeColor;
}