问题

我正在使用最新版本，截至2018年2月，Angular 5.2.1及其CLI 1.7.0。

如果我尝试在项目中包含PrimeNg，我会失败（我认为是来自webpack）：

与此类似的错误：

ERROR in ........ CssSyntaxError: <my_path>/node_modules/primeng/resources/primeng.css:5542:16: Can't resolve './images/line.gif'

我如何得到此错误

首先，我安装组件：

npm install --save font-awesome primeng

我在我的 styles.scss 中包含了PrimeNg，如下所示：

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

@import "~primeng/resources/themes/omega/theme.scss";
@import "~primeng/resources/primeng";

// rest of my styles.scss

然后，正常运行服务器：

ng serve

现在会抛出错误！

非常丑陋的“解决方案”

我通过对primeng文件进行一些黑客攻击来解决这个问题（从灵感来自url路径的字体很棒），使用变量指向正确的路径。

在我的 styles.scss ：

中

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

$MYNEWfont-omega-path: "~primeng/resources/themes/omega/fonts";
$MYNEWimage-omega-path: "~primeng/resources/themes/omega/images";
@import "~primeng/resources/themes/omega/theme.scss";

$MYNEWimage-path: "~primeng/resources/images";
@import "~primeng/resources/primeng";

// rest of my styles.scss

然后，更改一个PrimeNg文件名，这样我就可以将其视为带有变量的scss文件：

mv node_modules/primeng/resources/primeng.css node_modules/primeng/resources/primeng.scss

然后，编辑两个文件（和/或您想要使用的主题文件）：

node_modules/primeng/resources/primeng.scss
node_modules/primeng/resources/themes/omega/theme.scss

利用我创建的新变量 - 我找到“url”。例如，在新命名的 primeng.scss ：

中

-     background: transparent url("images/color.png")
+     background: transparent url("#{$MYNEWimage-path}/color.png")

而且，一切正常！： - ）

什么是简单而正确的解决方案？

我已经看到很多可能（我真的不知道，因为它们没有解释或清楚），建议使用webpack配置，resolve-url，或者可能在{{3中找到的东西}}

所有这些，我不明白，因为（再次，是Angular的新手）我还没有遇到过webpack配置。

所以... 有人可以给我一个快速/简单的解决方案，或指向能够明确解释如何找到解决方案的东西吗？

我怀疑有一些（工具链的）领域我应该学习如何做到这一点，看似简单的包含。所以，如果这是我理解问题及其解决方案的唯一方法，我会很感激我需要学习的内容。

谢谢！

Answer 1

包含PrimeNG样式和主题的简单易用的解决方案包含在.angular-cli.json文件中。您的.angular-cli.json文件应如下所示

 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "styles.scss"
      ],

另一种方法是你可以在index.html文件中包含cdns，但这不是加载样式的最佳方式。

希望有所帮助

Answer 2

我创建了Prime NG schematics npm模块，该模块使用Angular原理图技术在角度项目中自动添加对Prime NG的完全支持：

所以运行这些命令：

ng new <YOUR-APP-NAME>
ng add primeng-schematics

将自动处理：

确保package.json
中的项目依赖项
确保应用模块中的项目依赖关系

将预建的Prime NG主题添加到angular-cli.json
中
添加字体真棒字体和新素数图标

在角度项目中包含primeng及其主题的最佳方法是什么？

问题

我如何得到此错误

非常丑陋的“解决方案”

什么是简单而正确的解决方案？

2 个答案: