关于vue_cli4.X 版本中的设置scss全局变量_vuecli4中定义scss全局变量

起初按着网上各路大神的方法通通尝试了一遍最终都以失败告终，其中之一就有这个错误Undefined variable: "$theme-color".。由于大家各自使用的vue脚手架版本不同所以会造成不同的情况出现。我目前使用的vue/cli 4.2.3版本，按以下步骤配置亲测有效。

第一步：

首先在package.json中确认你的项目中是否集成了sass相应的"node-sass"和"sass-loader"两个包，如果在创建项目的时候选择了CSS预处理那个选项，则项目中就会有这两个包，如果没有的话，可以使用
npm install node-sass --save-dev npm install sass-loader --save-dev

第二步：

vue.config.js配置文件中配置css，重点是那串路径，

module.exports = {
   css: {
     loaderOptions: {
        sass: {
        prependData:`@import "./src/assets/scss/_variable";`   
            }
        }
    }
}
1
2
3
4
5
6
7
8
9

第三步：

在需要设置全局样式的地方引入就好了，注意设置style lang=“scss”

<style lang="scss">
#app {
  color: $theme-color;
}
</style>
1
2
3
4
5