vue sass配置全局变量

最新推荐文章于 2025-11-02 14:50:43 发布

原创最新推荐文章于 2025-11-02 14:50:43 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

项目经验同时被 2 个专栏收录

38 篇文章

订阅专栏

vue

28 篇文章

订阅专栏

在Vue项目中，为了方便地更改主题色，作者尝试使用Sass的全局变量。然而，直接在main.js中引入含有变量的scss文件并未生效，导致页面报“Undefined variable”错误。通过安装相关依赖并修改vue-config.js的CSS配置，特别是将data属性更改为prependData，最终成功实现了Sass全局变量的使用。

手上正在写的项目里有个主题色，然后感觉在很多地方都要写color:#fff、background-color:#fff很麻烦。就想在项目中使用一个sass的全局变量，后期如果要改主题色只改一个变量就可以，但是在**main.js里面直接import引入包含这个变量的scss文件之后，并不能全局使用，页面上会报Undefined variable。
1.先安装npm install sass-resources-loader --save
2.在vue-config.js里面按照官网配置**https://cli.vuejs.org/zh/guide/css.html#css-modules，但是配置之后也一直报错，后来将配置里的data属性改为prependData属性就可以了，参考https://segmentfault.com/a/1190000020392688?utm_source=tag-newest。vue-config.js中css配置sass的代码如下

在这里插入代码片// CSS 相关选项
css: {

 // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
 // 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
 // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
 //extract: false,

 // 是否开启 CSS source map？
 sourceMap: false,
 
 loaderOptions: {
     sass: {
         prependData: `@import "@/styles/common.scss";`
     }
 },
 // 为所有的 CSS 及其预处理文件开启 CSS Modules。
 // 这个选项不会影响 `*.vue` 文件。
 modules: false

}