ng-packagr配置assets后Angular 9库全局样式未生效如何解决

• ng-packagr配置中的assets字段仅负责将指定文件原封不动复制到构建输出的dist目录，不会自动将样式注入到库的组件逻辑中，也不会自动触发样式加载，因此不会主动生效。
• 你当前搭配Storybook使用的场景下，Storybook运行时默认不会主动加载库目录下的全局样式文件，需要额外配置引入。

分两类场景配置即可：

1. 让Storybook环境生效 #

在你的Storybook配置目录下找到preview.js（部分旧版本为config.js），在文件顶部引入全局样式文件即可：

import '../你的库相对路径/global.scss';

配置后重启Storybook，全局样式就会应用到所有预览的组件中。

2. 让使用你库的下游项目生效 #

你已经完成了全局样式的打包复制，只需要告知下游用户在自己项目的全局样式入口（一般为src/styles.scss）中手动引入即可：

@import '你的库包名/global.scss';

注：你的库包名为库目录下package.json中配置的name字段值
全局样式手动引入是Angular生态的常规实践，可避免自动注入污染下游项目的原有样式。

• 如果你的global.scss依赖其他scss变量、mixin文件，需要将这些依赖文件也加入到ng-package.json的assets数组中，确保构建后能被正确引用。
• 如果你需要对外暴露scss变量、mixin供下游自定义使用，可以单独将这些资源整理到目录中，统一加入assets配置后在文档中说明引用方式。

内容的提问来源于stack exchange，提问作者Ariana Rubí