如何在自定义Angular库中导入外部npm包的CSS文件？

问题原因 #

Angular库的构建工具（ng-packagr）不支持Angular应用中常用的~路径别名——这个别名是应用级webpack配置里指向node_modules的，库构建时不会解析这个符号，导致最终应用加载时直接请求localhost:4200/~npmpackage/style.min.css，自然找不到资源。

可行解决方案 #

1. 在库的angular.json中配置全局样式 #

找到你自定义库对应的angular.json配置块，在architect > build > options > styles数组里添加npm包的CSS路径：

{
  "projects": {
    "your-library-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/npmpackage/style.min.css",
              "projects/your-library-name/src/styles.scss"
            ]
          }
        }
      }
    }
  }
}

重新构建库后，CSS会被正确打包或关联，安装到应用后就能正常加载。

2. 用绝对/相对路径直接导入 #

在库的组件样式或全局样式文件中，直接使用指向node_modules的路径，不要用~：

• 如果是库的全局styles.scss：

@import '../../node_modules/npmpackage/style.min.css';

（路径根据你的样式文件位置调整，确保能正确指向node_modules里的目标CSS）

• 如果是组件的component.scss：

@import '../../../node_modules/npmpackage/style.min.css';

3. 由使用库的应用负责导入CSS #

如果不想把第三方CSS打包进你的库，可以在库的文档中说明，让用户在自己的Angular应用中导入：

• 在应用的angular.json的styles数组添加：

"node_modules/npmpackage/style.min.css"

• 或者在应用的styles.scss中导入：

@import 'npmpackage/style.min.css';

应用的Angular CLI会正确解析这个路径。

4. 内联CSS（适合体积小的样式） #

如果第三方CSS体积不大，可以直接将其内容复制到库的全局样式文件或组件样式中，彻底避免路径问题。

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