自定义Angular SCSS混入导入失败原因及全局配置方法

问题详情 #

1. 操作流程：
   • 在src/theme下创建_mixins.scss，定义混入card-hover-effect
   • 同目录的custom.scss导入_mixins.scss，主文件styles.scss导入custom.scss
   • angular.json已将styles.scss配置为全局样式文件
2. 报错信息：

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
╷
7 │ @include card-hover-effect();

3. 当前可行但不理想的方案：直接在组件SCSS中导入_mixins.scss（同时混入文件内导入_variables.scss），但不想每个组件都重复导入。

混入代码：

@mixin card-hover-effect() {
  transition: all 0.3s;
  &:hover {
    cursor: pointer;
    transform: scale(1.02);
    box-shadow: $card-box-shadow;
  }
}

附相关文件说明：

• 文件夹结构：src下的theme文件夹包含_mixins.scss、custom.scss等文件
• custom.scss：导入了同目录的_mixins.scss
• 组件SCSS：直接调用@include card-hover-effect()
• angular.json：styles数组已配置src/styles.scss

解决方案 #

方案1：通过angular.json的stylePreprocessorOptions全局注入混入 #

Angular允许通过配置自动给每个组件的SCSS文件注入指定的导入语句，步骤如下：

1. 打开angular.json，找到projects -> [你的项目名称] -> architect -> build -> options
2. 添加stylePreprocessorOptions配置：

"stylePreprocessorOptions": {
  "includePaths": [
    "src/theme"
  ],
  "additionalData": "@import '_mixins.scss'; @import '_variables.scss';"
}

• includePaths：指定混入/变量文件所在的目录，避免写完整路径
• additionalData：编译每个组件SCSS时自动注入的导入语句，确保混入和变量全局可用

方案2：用Sass @forward统一导出（推荐现代语法） #

如果使用Dart Sass（Angular默认依赖），可以用@forward统一管理全局样式模块：

1. 在src/theme下创建index.scss（或theme.scss），内容如下：

@forward './_variables.scss';
@forward './_mixins.scss';

2. 在angular.json的stylePreprocessorOptions中配置：

"stylePreprocessorOptions": {
  "includePaths": [
    "src/theme"
  ],
  "additionalData": "@import 'index.scss';"
}

这样所有组件无需单独导入，就能直接使用全局的混入和变量。

问题原因 #

Angular组件样式默认是封装隔离的，全局styles.scss中导入的混入只会作用于全局样式，不会自动进入每个组件的SCSS编译上下文。而全局变量能直接访问，通常是因为已经通过stylePreprocessorOptions全局注入了变量文件，并非默认行为。

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