Angular-cli, PrimeNG and angular-cli

Question

能否有人帮忙：我正在尝试在使用angular-cli创建的Angular应用程序中使用PrimeNG。我在我的新应用程序中安装了PrimeNG，但我无法使其样式生效。PrimeNG网站指出我需要将以下内容添加到Index.html文件中：

href="../node_modules/primeng/resources/themes/omega/theme.css"
href="/node_modules/primeng/resources/primeng.min.css"
href="./assets/font-awesome-4.7.0/css/font-awesome.min.css"

请注意，我已经尝试过这种方法，并尝试将它们添加到angular-cli.json文件的样式数组中，但仍然没有成功。

"styles": [
        "styles.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "./assets/font-awesome-4.7.0/css/font-awesome.min.css"
      ]

有人可以帮忙吗？

提前感谢。

- David

---

如果有人遇到这个问题，以下是我最终用来解决它的步骤。首先，使用“angular-cli”创建一个新项目。第二步：cd到您的新应用程序的根目录，并安装PrimeNG并运行$npm install primeng --save。第三步：将样式路径添加到项目的“angular-cli.json”文件中的styles: []数组中。第四步：在您的项目中安装font-awesome（这是必需的）$npm install font-awesome --save。这对我起作用了！ - David

Answer 1

在您的项目文件夹中有一个名为styles.css的文件夹，请进入该文件夹并尝试以下操作。

/* You can add global styles to this file, and also import other style files */
@import url('../node_modules/primeng/resources/themes/omega/theme.css');
@import url('../node_modules/primeng/resources/primeng.min.css');
@import url('../node_modules/font-awesome/css/font-awesome.min.css');
@import url('../node_modules/bootstrap/dist/css/bootstrap.min.css');

- Mertcan Diken

Answer 2

您应该检查您的路径和文件，这些设置可能已经过时。

例如，primeNG 与 omega/theme.scss 一起提供，而不是 css。这个文件可能不存在于您的 node_modules 目录中。

我在我的 angular-cli 中使用了以下设置，它似乎工作得很好：

  "styles": [
    "styles.css",
    "../node_modules/primeng/resources/primeng.css"
  ]

请注意angular-cli (beta-30)将会将这些文件的内容作为<style>标签添加。

此外，我最近几天也做了类似的事情（使用primeNG组件的angular-cli项目），可以尝试一下我的（仍在建设中的）演示库，它使用primeUI进行样式设置，但可能有所帮助。您可能想查看该项目中的angular-cli.json。

- yuval.bl