Angular库开发：如何维护模块级主题Mixin CSS文件？

问题根源 #

发布后的库未包含模块级主题SCSS文件（如wizard-theme.scss、button-theme.scss），消费应用解析@use路径时找不到对应文件，导致报错。

具体解决方案 #

• 将模块级主题文件纳入发布包
  在库的package.json的files字段中明确包含这些主题文件，确保发布时它们被打包进去：

  "files": [
    "dist",
    "src/lib/moduleA/wizard-theme.scss",
    "src/lib/moduleB/button-theme.scss"
  ]
  

  也可以用通配符批量匹配所有主题文件：

  "files": [
    "dist",
    "src/lib/**/*-theme.scss"
  ]
  

  注意：不需要在public-api.ts中导出SCSS文件，只要确保文件被包含在发布包内即可。

• 调整全局SCSS的导入路径
  避免使用基于源码目录的相对路径，改用基于库包名的绝对路径，适配发布后的目录结构：

  1. 先在库的tsconfig.lib.json中配置路径别名：

     "paths": {
       "@your-lib-name/*": ["src/lib/*"]
     }
     

  2. 修改全局SCSS的导入语句：

     @use '@angular/material' as mat;
     @use '@your-lib-name/moduleA/wizard-theme';
     @use '@your-lib-name/moduleB/button-theme';
     

• 统一主题入口（推荐）
  在库中创建一个单独的theme.scss入口文件，集中导入所有模块的主题Mixin：

  @use '@angular/material' as mat;
  @use './moduleA/wizard-theme';
  @use './moduleB/button-theme';
  

  然后在package.json中配置导出规则，让消费应用可以直接导入整个主题：

  "exports": {
    "./theme": "./src/lib/theme.scss"
  }
  

  消费应用只需一行导入即可使用所有主题Mixin：

  @use '@your-lib-name/theme';
  

核心结论 #

必须将这些模块级主题SCSS文件纳入库的发布内容，否则消费应用无法解析主题Mixin的导入路径，这是解决问题的前提。

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