Angular 19中如何全局导入Mixin文件并在组件中直接使用？

问题场景 #

我的src/style/目录下有这些文件：

_fonts.scss 
_globals.scss 
_media.scss 
_mixins.scss 
_normalize.scss 
_utils.scss 
_variables.scss

src/style.scss内容如下：

@use 'styles/normalize';
@use 'styles/fonts';
@use 'styles/mixins';
@use 'styles/media';
@use 'styles/variables';
@use 'styles/utils';
@use 'styles/globals';

我在search.component.scss里尝试用_mixins.scss的混合宏：

.search__button {
  @include reset-button;
}

结果报错：

✘ [ERROR] Undefined mixin.
   ╷
23 │   @include reset-button;
   │   ^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/app/shared/components/search/search.component.scss 23:3  root stylesheet [plugin angular-sass]

现在直接在组件里用@use导入或者在angular.json里配置能正常用，但我想找更简洁的方法：能不能在style.scss里全局导入_mixins.scss后，所有组件直接用里面的混合宏？

解决方案 #

不行。因为Sass的@use是作用域隔离的，style.scss里导入的模块只在这个文件本身生效，组件的样式文件是独立编译的，没法共享style.scss里的导入内容。

要实现全局可用，有两种简洁方案：

1. 配置angular.json全局导入 #

打开项目的angular.json，找到build.options.styles，把需要全局用的文件加进去，Angular编译每个组件样式时会自动注入这些文件：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/style.scss",
              "src/style/_mixins.scss",
              "src/style/_variables.scss" // 如果需要全局变量也可以加
            ]
          }
        }
      }
    }
  }
}

2. 做一个全局导入入口文件 #

新建src/style/_global-imports.scss，把所有要全局用的模块都导进去：

@use 'mixins';
@use 'variables';
@use 'media';
// 其他需要全局的模块

之后要么在angular.json里配置这个入口文件，要么在每个组件样式顶部只导这一个文件：

@use 'styles/global-imports';

这样组件里就能直接用里面的混合宏、变量，不用一个个单独导入模块了。

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