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

原创已于 2023-08-11 18:00:57 修改 · 6.1k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#scss #sass #vue.js

于 2022-01-07 21:48:50 首次发布

vue 专栏收录该内容

20 篇文章

订阅专栏

这是一个展示个人前端开发成果的站点，包括自建的前端功能和UI组件。作者欢迎感兴趣的人访问并提出建议。项目采用Vue.js，配置了scss全局变量，并提供了详细的配置步骤。在base.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;
}