我正在使用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
中下面丹尼尔建议的答案。这是正确的方法,只有方法吗?
答案 0 :(得分:4)
您应将primeicons
添加为peerDependency
,然后在另一个项目中,应在angular.json
中添加样式配置。
"styles": [
"node_modules/primeicons/primeicons.css",
],
之后,您已经将其导入,因此不再需要import
中的my-lib-playground/src/styles.scss
。
PrimeNG在github的自述文件中有该示例。 https://github.com/primefaces/primeng
答案 1 :(得分:1)
图书馆项目没有根目录,根目录始终取决于使用图书馆的项目根目录。
所以您必须将字体导入到主项目中,我知道您已经尝试过了,
因此,唯一的选择是将字体转换为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');
}