angular - 使用 Angular cli 创建库时如何捆绑供应商字体

Question

我正在使用 Angular CLI (v7.x) 创建一个组件库，但我无法弄清楚如何获取将 css 规则包含在由 ng-packagr 生成的 dist 文件夹中所需的第 3 方字体 Assets 。

由于 ng-packagr 不支持按此 issue 进行的 scss 捆绑，我在后期构建任务中使用 scss-bundle 为我执行捆绑并将最终捆绑的 scss 文件放入我的 dist 文件夹中。

但是，一些 css 规则(例如字体声明)包括对相关字体文件夹的 url 引用，而这些我还没有包含在我的 dist 文件夹中。

因此，例如，在我的 Angular 库应用程序中，我有 styles.scss 文件，其中包含一个用于导入图标样式表的条目:

@import "~primeicons/primeicons.css";

但是有一个相关的字体文件夹，这些 primeicons 位于我的用于 css 的 node_modules 文件夹中。

一种方法是我可以编写进一步的构建后步骤来捆绑这些并将它们与我的 dist 文件夹中的串联 scss 文件一起放入 fonts 文件夹中，以便可以解析它们。

我想知道在构建我的库时是否有更聪明的方法，或者使用 ng-packager 或 angular-cli 内置的方法来做到这一点？

更新

所以我尝试了 fonts 的方法我的库项目根目录中的文件夹(实际上在 Assets 文件夹下)并将其复制到我的根目录 dist建立我的图书馆后的文件夹。

在我的 Playground 应用程序中，我尝试在我的实际库中使用打包样式，我有这个:

my-lib-playground/src/styles.scss

@import "../../../dist/my-lib/styles";

但是当尝试使用 CLI 构建我的 Playground 应用程序时，我得到:

ERROR in ./src/styles.scss (/Users/someone/Documents/Github/my-lib-playground/node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!/Users/someone/Documents/Github/my-lib-playground/node_modules/postcss-loader/src??embedded!/Users/someone/Documents/Github/my-lib-playground/node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module Error (from /Users/someone/Documents/Github/my-lib-playground/node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /Users/someone/Documents/Github/my-lib-playground/dist/my-lib-playground/styles.scss:609:56: Can't resolve './fonts/open-sans-v15-latin-700.eot' in '/Users/someone/Documents/Github/my-lib-playground/projects/my-lib-playground/src'

所以我的实际问题是:

如何让我使用的“ Playground ”应用程序在使用 cli 构建时正确包含\解析字体文件？这些显然是目前正在尝试相对于我的 Playground 应用程序解决的问题。这里的正确解决方案是什么？还是我做错了什么？

另一种方式

制作primeng一个peerDependency我的图书馆，让开发人员负责添加 primeng到他们的应用程序并在 angular.json 中包含相关样式根据下面丹尼尔的建议答案。这是正确的方法吗？

Answer 1

您应该将 primeicons 添加为 peerDependency，然后在其他项目中您应该在 angular.json 中添加样式配置。

"styles": [
  "node_modules/primeicons/primeicons.css",
],

之后你已经导入了它，所以它不再需要 my-lib-playground/src/styles.scss 中的 import。

PrimeNG 在 github 的自述文件中有该示例。 https://github.com/primefaces/primeng