Angular 5项目跨SCSS文件调用@mixin报错：未找到该mixin

这个问题我之前在Angular项目里也遇到过！核心原因是Angular组件的SCSS默认是作用域隔离的——每个组件的样式文件会被单独编译，并不会自动识别全局styles.scss里定义的@mixin，所以才会抛出No mixin named breakpoint的错误。

下面给你两种实用的解决方案：

方案一：手动在组件SCSS中导入mixin文件 #

首先建议把你的breakpoint@mixin从styles.scss中抽离出来，单独放到一个SCSS partial文件里（文件名以下划线开头，比如_mixins.scss），这样更符合SCSS的代码组织规范。

假设你的_mixins.scss放在src/styles/目录下，那么在需要使用这个mixin的组件SCSS文件（比如comp01.scss）顶部，添加导入语句：

// 根据你的文件实际路径调整，SCSS会自动识别下划线开头的partial文件，导入时可以省略下划线
@import '../../styles/mixins';

app-comp02{
  width: 100%;
  @include breakpoint(window_small){ width: 50% }
  @include breakpoint(window_medium){ width: 50%; }
  @include breakpoint(window_large){ width: 33%; }
  height: auto;
  margin: 0 5px;
}

这样组件的SCSS就能找到breakpointmixin了。

方案二：配置Angular全局自动导入mixin #

如果不想每个组件都手动写导入语句，可以通过angular.json配置让Angular自动为所有组件的SCSS文件导入这个mixin：

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

"options": {
  // 其他已有的配置...
  "stylePreprocessorOptions": {
    "includePaths": [
      "src/styles" // 告诉Angular去哪里找SCSS partial文件
    ],
    "imports": [
      "src/styles/_mixins.scss" // 指定要全局自动导入的mixin文件
    ]
  }
}

配置完成后，重启你的Angular开发服务器，所有组件的SCSS文件就都能直接使用breakpointmixin，不用再手动导入了。

额外说明 #

为什么直接在styles.scss里定义mixin不行？因为styles.scss是全局样式文件，它的编译上下文和组件的SCSS文件是分开的——组件的样式会被Angular封装成作用域样式（默认带[ng-content]前缀），不会自动继承全局样式文件里的mixin定义，必须通过导入或者全局配置的方式让组件的SCSS能访问到这些mixin。

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