Angular开发中使用SCSS变量时报未定义错误，导入操作为何不生效？

你写的导入语句@import url("./global/_colors.scss"); 完全用错了场景：

• 这行是原生浏览器CSS的合法导入语法，不是Sass预处理器在编译阶段识别的SCSS导入写法
• Sass编译器一旦看到@import后面套了url()包裹，就会直接跳过编译解析，把这行原封不动输出到最终生成的CSS文件里，等浏览器运行时再去加载外部样式。这种场景下，_colors.scss里定义的$color-red变量根本不会被合并到当前文件的编译作用域，自然会抛出Undefined variable的报错。

说白了，你不管把路径调整成带下划线前缀还是去掉后缀的形式，只要还套着url()，Sass就不会帮你把变量内容“搬运”到当前文件里，问题永远解决不了——这是很多从纯CSS转写SCSS的开发者最容易踩的惯性写法坑。

Sass原生的导入语法不需要加url()包裹，写路径时Sass会自动匹配带下划线前缀的局部文件、自动识别.scss后缀，常见的正确写法：

// 最简洁的写法：不用写_前缀、不用写.scss后缀，Sass会自动匹配./global/_colors.scss
@import './global/colors';

// 写完整的带下划线前缀的文件路径，也可以正常识别
@import './global/_colors.scss';

补充说明：目前Sass官方已经将传统的@import语法标记为废弃，更推荐使用支持模块化的@use语法导入全局变量，写法示例：

// 将colors模块的所有变量引入当前作用域
@use './global/colors' as *;

这种模块化写法不会把变量混到全局作用域，从根源上避免不同文件的变量命名冲突问题。

如果调整导入写法后还是存在变量未定义的问题，可以按以下顺序排查：

• 确认导入的作用域正确：Angular编译组件级样式是独立的沙箱作用域，如果你在组件的scss文件里用变量，不能依赖全局styles.scss里的导入——必须在组件自身的scss文件里显式导入依赖的变量文件。
• 想减少重复导入的工作量，可以在angular.json的构建配置里配置SCSS全局路径映射，在对应项目的build选项下添加配置：

  "stylePreprocessorOptions": {
    "includePaths": ["src/styles"]
  }
  

  配置完成后，所有scss文件都可以直接通过@use 'colors' as *;导入全局变量，不用反复写长长的相对路径。
• 不要把带下划线前缀的SCSS局部文件（比如_colors.scss）直接加到angular.json的styles数组里作为独立入口编译：这类局部文件的设计定位就是被其他文件导入复用，独立编译时不会对外暴露内部的变量定义。

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