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

Question

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

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

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

例如，在我的 angular 库应用程序中，我有 styles.scss 文件，其中包含导入图标样式表的条目：

@import "~primeicons/primeicons.css";

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

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

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

更新

所以我尝试了在我的库项目根目录（实际上在资产文件夹下）中有一个 fonts 文件夹的方法，并在构建我的库后将其复制到我的 dist 文件夹的根目录.

在我的游乐场应用程序中，我尝试在我的实际库中使用打包样式，我有这个：

my-lib-playground/src/styles.scss

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

但是当尝试使用 CLI 构建我的游乐场应用程序时，我得到：

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'

所以我的实际问题是：

如何在使用 cli 构建时让我的消费 'playground' 应用程序正确地 include\resolve 字体文件？这些显然是目前正在尝试相对于我的游乐场应用程序解决的问题。这里的正确解决方案是什么？还是我做错了什么？

另一种方式

将 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

Answer 2

库项目没有根目录，根目录始终取决于库所在的项目根目录。

所以要么你必须将字体导入主项目，我知道你已经尝试过了，

所以，唯一的选择就是将字体转换为base64并赋值给CSS。

将字体文件转换为 base64 - https://www.giftofspeed.com/base64-encoder/

在 CSS 中声明字体

@font-face {
    font-family: 'myfont';
    src: url(data:font/truetype;charset=utf-8;base64,<BASE64-STRING>) format('truetype');
}

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

How to bundle vendor fonts when creating libraries with Angular cli

angular-cli

primeng

angular

ng-packagr

angular-cli-v7