Angular中调用全局SCSS样式变量报错（Undefined variable）的问题咨询

兄弟，我看你遇到的这个报错主要是两个小误区搞出来的，咱们一步步捋清楚解决办法：

首先，你混淆了Sass变量和CSS原生的var()函数用法啦！Sass的变量是直接用$变量名调用的，不需要套var()，这是第一个问题。

然后第二个问题：你在全局的styles.scss里定义了变量，但组件的SCSS文件默认是不知道这个全局变量的，所以会报“Undefined variable”。

给你两种解决思路，按需选就行：

方法一：手动导入全局样式文件 #

在你要使用变量的组件SCSS文件最开头，导入全局的styles.scss（注意路径要根据你的项目结构调整，比如如果组件在src/app/components下，全局样式在src下，路径就是../../styles.scss）：

@import '../../styles.scss';

.add {
  background-color: $green-color; // 直接用Sass变量，不用var()
}

方法二：配置Angular自动注入全局变量（推荐，不用每个组件都导入） #

打开项目根目录的angular.json文件，找到architect -> build -> options，添加stylePreprocessorOptions配置，让Angular自动识别全局的SCSS变量文件：

"architect": {
  "build": {
    "options": {
      // 其他原有配置...
      "stylePreprocessorOptions": {
        "includePaths": ["./src"] // 这里填styles.scss所在的目录，一般是src目录
      },
      "styles": [
        "src/styles.scss" // 确保这个全局样式文件已经在styles数组里
      ]
    }
  }
}

配置完之后，所有组件的SCSS文件都可以直接用$green-color这个变量，不用再手动导入啦！

最后再提醒下：以后用Sass变量直接写$xxx就行，var()是给CSS自定义属性（比如:root { --green: #xxx; }这种）用的，别搞混咯~

备注：内容来源于stack exchange，提问作者Edgar