Question

我正在使用Angular CLI（v7.x）创建一个组件库，却无法弄清楚如何获得css规则包含在ng-packagr生成的dist文件夹中所需的第三方字体资源。

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

但是，某些css规则（例如字体声明）包括对相对字体文件夹的url引用，而我尚未将它们包含在dist文件夹中。

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

@import "~primeicons/primeicons.css";

但是在我的node_modules文件夹中有一个相对的字体文件夹，这些基本图标位于这些CSS文件夹中。

一种方法是，我可以写一个进一步的后期构建步骤，将它们捆绑在一起，并将它们放在dist文件夹中我串联的scss文件旁边的fonts文件夹中，以便可以解决它们。

我想知道是否有更聪明的方法，或者在构建库来执行此操作时是否使用ng-packager或angular-cli构建的方法？

更新

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

在我的运动场应用程序中，我尝试在实际的lib中使用打包样式，

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应用，显然这些问题正在设法解决。什么是正确的解决方案？还是我做错了什么？

另一种方式

将primeng设为我的图书馆的peerDependency，并由开发人员负责将primeng添加到他们的应用中，并根据相关规定将相关样式包括在angular.json中下面丹尼尔建议的答案。这是正确的方法，只有方法吗？

Answer 1

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

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

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

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

2 个答案: