Angular组件使用SCSS混合宏报错，该如何解决？

为什么全局导入的混合宏无法在组件中复用？ #

1. SCSS模块作用域限制：@use是SCSS的模块化导入语法，每个.scss文件都是独立模块，全局styles.scss中通过@use导入的混合宏仅作用于该文件本身，不会自动全局注入到所有组件样式文件中。
2. 路径解析错误：组件样式文件中直接写@use "mixins"时，SCSS会默认从当前组件文件所在目录查找_mixins.scss，而你的混合宏文件在/src/styles目录下，路径不匹配导致找不到文件。
3. styleUrls的作用误解：组件ts文件的styleUrls是用来指定当前组件的样式文件列表，并非用于导入SCSS模块，添加_mixins.scss路径无法解决模块导入问题。

解决方法 #

方法1：使用相对路径导入（快速临时方案） #

根据组件文件与/src/styles的目录层级，编写正确的相对路径。例如，如果组件位于/src/app/year-events目录下，导入语句应为：

@use "../../styles/mixins";

之后即可通过@include mixins.screen-size(...)使用混合宏。

方法2：配置SCSS全局导入路径（推荐） #

通过Angular配置文件设置全局SCSS预处理器路径，让所有组件样式文件都能直接引用/src/styles下的模块：

1. 打开项目根目录下的angular.json文件
2. 找到projects -> [你的项目名] -> architect -> build -> options节点
3. 添加stylePreprocessorOptions配置：

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

4. 重启Angular开发服务
   完成后，组件样式文件中直接使用@use "mixins";即可成功导入混合宏。

方法3：通过全局样式转发混合宏（备选方案） #

在styles.scss中使用@forward导出混合宏，让组件可以通过全局样式模块引用：

// styles.scss
@forward "mixins";

然后在组件样式文件中：

@use "styles";
@include styles.screen-size(...);

此方法会将混合宏绑定到全局样式模块，不如方法2灵活。

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