如何让自定义Angular库的样式在消费项目中自动生效？

你已经通过ng-package.json配置确保样式文件被打包到库的输出目录，也用package.json的exports简化了样式导入路径，以下是几种让样式在npm install @my-lib后自动生效的可行方案：

方案一：在库的核心模块中直接导入样式 #

在库的根模块（比如MyLibModule）的代码顶部添加样式导入语句，当消费项目引入该模块时，样式会被自动加载：

// 库的根模块文件（如 src/lib/my-lib.module.ts）
import './styles/default-theme.css';

@NgModule({
  declarations: [/* 库组件 */],
  exports: [/* 导出的组件 */]
})
export class MyLibModule { }

注意：导入路径要对应库源码中的样式位置，ng-packagr会根据你配置的assets把样式文件复制到输出目录，确保打包后的模块能正确找到样式文件。

方案二：在库的package.json中添加styles字段 #

在库的package.json中新增styles字段，指向你的主题样式文件：

{
  "name": "@my-lib",
  "version": "x.x.x",
  "styles": [
    "./styles/default-theme.css"
  ],
  // 已有的exports等配置
}

Angular CLI在部分场景下会识别这个字段，若用户使用ng add @my-lib（需为库配置Schematics），CLI会自动把该样式添加到消费项目的angular.json的styles数组里。

方案三：编写Schematics实现完全自动化配置 #

如果需要用户执行npm install @my-lib或ng add @my-lib时自动修改消费项目的angular.json，可以给库添加Schematics：

• 为库创建Schematics子项目，生成ng-add schematic
• 在schematic逻辑中编写代码，找到消费项目的angular.json，将@my-lib/styles/default-theme.css添加到styles数组
• 在库的package.json中配置schematics字段，指向你的schematic入口

这种方式能实现完全自动化，适合降低用户使用成本的场景。

内容的提问来源于stack exchange，提问作者jon.xnkif