Angular项目全局SASS变量无法使用但其余样式正常的排查求助

核心误区先明确 #

你在angular.json的styles数组中注册的全局样式文件，仅会将文件内最终编译生成的CSS类、样式规则注入到全局样式表中，不会自动把SASS变量、混合宏、函数这类预编译资源注入到每个组件的样式文件中，这就是为什么全局类能生效但变量找不到的根本原因。

逐项排查步骤 #

• 第一步：确认stylePreprocessorOptions配置位置正确
  该配置必须放在angular.json中projects > 你的项目名 > architect > build > options节点下，不要错放到test节点或者项目配置最外层，配置示例：

  "stylePreprocessorOptions": {
    "includePaths": [
      "src/styles" // 建议直接指定到变量文件所在的目录，不用写src减少路径层级
    ]
  }
  

  修改完配置后必须停止当前ng serve进程，删除node_modules/.cache目录后再重启服务，避免缓存导致配置不生效。

• 第二步：检查@use的写法是否符合SASS模块规则
  SASS的@use默认会把导入文件的所有资源放到「文件名对应的命名空间」下，如果你配置了includePaths为src/styles，变量存放在colors.scss中，组件内正确的写法有两种：

  1. 带命名空间调用：

  @use "colors";
  div { background-color: colors.$test-color; }
  

  2. 取消命名空间直接调用（加as *）：

  @use "colors" as *;
  div { background-color: $test-color; }
  

  如果还是用已废弃的@import写法，直接写@import "colors.scss";即可，不需要加命名空间。

• 第三步：验证变量文件本身的合法性
  确认你的变量是定义在文件最外层，没有嵌套在任何{}选择器内部；变量名拼写完全一致，没有大小写错误；如果之前把变量放在全局styles.scss里，建议把所有变量、混合宏都抽成单独的文件（比如_variables.scss，下划线开头的文件SASS会识别为纯资源文件不会单独编译成CSS），不要和全局的业务样式写在一起。

• 第四步：临时路径验证
  先在组件样式里用完整的相对路径导入变量文件测试，比如你的组件在src/app/xxx/xxx.component.scss，变量文件在src/styles/colors.scss，就写@import "../../../styles/colors.scss";，如果能正常生效，说明是你的includePaths配置或者导入路径写错了；如果还是报错，检查变量文件是否存在、变量名是否正确。

内容的提问来源于stack exchange，提问作者Konrad Viltersten