8

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

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

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

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

@import "~primeicons/primeicons.css";

但是有一个相对字体文件夹，这些素数图标位于我的 node_modules 文件夹中，用于 css。

在此处输入图像描述

一种方法是我可以编写进一步的后期构建步骤来捆绑这些并将它们放入我的 dist 文件夹中连接的 scss 文件旁边的字体文件夹中，以便可以解决它们。

我想知道在构建我的库时是否有更聪明的方法，或者使用 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 构建时，如何让我正在使用的“游乐场”应用程序正确包含\解析字体文件？这些显然是目前相对于我的游乐场应用程序正在尝试解决的问题。这里的正确解决方案是什么？还是我做错了什么？

另一种方式

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

4

2 回答 2

6

您应该添加primeicons一个peerDependency，然后在另一个项目中添加angular.json样式配置。

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

之后，您已经将其导入，因此不再需要importfrom my-lib-playground/src/styles.scss。

PrimeNG 在 github 的自述文件中有这个例子。 https://github.com/primefaces/primeng

于 2019-04-24T06:30:18.707 回答
3

库项目没有根目录，根目录始终依赖于使用库的项目根目录。

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

因此，唯一的选择是将字体转换为 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');
}
于 2019-04-26T19:38:41.047 回答