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

Question

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

由于ng-packagr根据此问题不支持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为 apeerDependency然后在另一个项目中添加angular.json样式配置。

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

之后，您已经导入了它，因此它不再需要importfrommy-lib-playground/src/styles.scss了。

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