Angular10升级至16后引入共享SCSS库导致构建时长超40分钟

一、@use/@forward的使用问题 #

你的多层嵌套@forward/@use结构是构建暴慢的核心原因：

• 当子文件重复转发或引用已被转发的模块时，Sass的模块解析会反复遍历依赖树，生产级项目样式文件多、层级深的情况下，这种嵌套会让解析次数呈指数级增长。
• 主应用里@use '@scrubbed-company-name/shared-library-name/assets/styles/styles.scss' as styles;的全量引入方式，会触发整个共享库样式模块的完整解析，完全没用到Angular的按需编译能力。

二、是否要预编译共享库SCSS为CSS？ #

是，但不能直接编译成静态CSS——那样会丢失Sass变量、混合宏等动态能力，没法在主应用复用这些资源。正确的做法是利用Angular库的样式打包机制预编译成可复用模块，避免主应用重复解析。

三、正确实现方案 #

1. 重构共享库样式模块结构 #

• 改成扁平式转发结构，取消多层嵌套的@forward：
  在共享库的assets/styles/styles.scss里，只转发所有子模块；子模块内部只引用自身需要的基础模块（比如变量、混合宏），绝对不能重复转发根样式里已转发的内容。

  // 共享库styles.scss
  @forward './variables';
  @forward './mixins';
  @forward './components/button';
  @forward './components/card';
  
  // 子模块button.scss
  @use '../variables' as vars;
  @use '../mixins' as mix;
  
  .btn {
    color: vars.$primary-color;
    @include mix.rounded-corner;
  }
  

2. 优化共享库的angular.json配置 #

在共享库的build配置里，添加样式资源的打包规则，让Angular提前预编译样式模块：

{
  "projects": {
    "shared-library-name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              "src/assets/styles" // 把样式目录标记为静态资源
            ],
            "styles": [
              "src/assets/styles/styles.scss" // 预编译主样式文件
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/assets/styles" // 添加样式根路径，减少@use的路径层级
              ]
            }
          }
        }
      }
    }
  }
}

3. 主应用的样式引入优化 #

• 别在主styles.scss里全量引入共享库样式，改成按需引入：
  在需要用共享样式的组件里，单独引用对应的子模块，不要全量拉根styles.scss：

  // 主应用button.component.scss
  @use '@scrubbed-company-name/shared-library-name/assets/styles/components/button' as btn;
  
  .app-btn {
    @extend btn.btn;
    margin: 10px;
  }
  

• 如果必须全局引入，就在主应用的angular.json里把共享库样式路径加到stylePreprocessorOptions.includePaths：

  {
    "projects": {
      "main-app": {
        "architect": {
          "build": {
            "options": {
              "stylePreprocessorOptions": {
                "includePaths": [
                  "node_modules/@scrubbed-company-name/shared-library-name/assets/styles"
                ]
              }
            }
          }
        }
      }
    }
  }
  

  之后主styles.scss里就能简化成：

  @use 'styles' as styles;
  

4. 禁用不必要的Sass特性 #

• 生产环境必须关闭Sass的sourceMap（开发环境可开）：
  在angular.json的build配置里加：

  "stylePreprocessorOptions": {
    "sassOptions": {
      "sourceMap": false
    }
  }
  

• 尽量少用深层嵌套的@extend，改用混合宏或变量直接赋值，减少Sass合并选择器的开销。

四、验证测试 #

• 新建一个极简Angular16项目，只按需引入共享库的单个样式模块，测下构建时长，确认优化是否生效。
• 用ng build --stats-json生成构建统计文件，分析样式模块的解析耗时，定位有没有残留的重复解析模块。

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