Angular 2 - PrimeNg 风格不起作用

Question

我已经按照运行 npm install primeng --save 安装 primeng 的说明进行操作，然后在 app.module.ts 文件中导入我需要的内容，例如：

import {CheckboxModule} from 'primeng/primeng';  

...

imports: [
    CheckboxModule,
  ],...

然后我将样式表添加到 index.html 文件：

<head>
  ...
    <link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/omega/theme.css" />
    <link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/primeng.min.css" />
    <link rel="stylesheet" type="text/css" href="../node_modules/font-awesome/css/font-awesome.min.css" />
</head>

我的 IDE 可以找到文件位置（通过按住 ctrl 并单击 href 值）但浏览器找不到（404 错误）。

我复制了复选框示例 (http://www.primefaces.org/primeng/#/checkbox) 并将其添加到我的组件之一，但样式与普通复选框相同。

此外，没有抛出其他错误。

是否应该将样式添加到另一个文件？我不确定为什么它不起作用。

Answer 1

根据 setup instructions 你应该使用以下内容：

<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" />

注意路径以：

开头

href="/node_modules/primeng/resources/themes/omega/theme.css"

不是：

href="../node_modules/primeng/resources/themes/omega/theme.css"

希望对您有所帮助！ :)

Answer 2

如果您使用的是 cli，您在项目结构中使用了什么，您应该将它们添加到 styles.css。总的来说，他们应该进入捆绑。

Answer 3

我找到了一个 tutorial，它使用 PrimeNg 和 Angular CLI，对我有用。

我将 font-awesome.min.css 样式表添加到 index.html。

然后将我想要的主题（例如 "../node_modules/primeng/resources/themes/omega/theme.css",）添加到 angular-cli.json 文件的 "styles" [...] 部分。

Answer 4

在 style.css 文件中，添加您的导入例如：

 @import '../node_modules/primeng/resources/themes/omega/theme.css'

如果您正确下载了 PrimeNG，现在应该可以使用了

请注意：确保您在正确的位置导入了 primeNG 模块（事实上，我们导入的是模块而不是组件，请小心；）

Answer 5

刚刚升级到 PrimeNG 6.1.6 并遇到此错误。

似乎在这个版本中，主题已停止使用 theme.css，取而代之的是 theme.scss。因此，您必须在 angular.json 的 "styles" 部分中引用 "node_modules/primeng/resources/themes/omega/theme.scss"（而不是 "theme.css"）并且...

您将需要 npm 重建节点-sass。

Answer 6

我通过从 index.html 中删除 rel="stylesheet" type="text/css" 解决了我的问题，并将以下导入添加到 styles.css :

@import '~primeicons/primeicons.css';
@import '~primeng/resources/themes/nova-light/theme.css';
@import '~primeng/resources/primeng.min.css';

Answer 7

自从（2017 年）首次提出这个问题以来，primeng 提供主题（免费和商业）的方式发生了很大变化。这是针对 2020 年遇到与上述类似问题的任何人的更新答案。（更新对 "primeng": "^10.0.0-rc.2" 和 angular v~10.0.6 有效）

基本上可以通过三种方式在 angular 2+ 应用程序中导入免费 primeng 主题。

将 primeng 导入添加到 angular.json 样式块

  "styles": [
              "src/styles.scss",
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/saga-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css"
            ],

将 primeng 导入添加到 src/app/styles.scss 文件

@import url("../node_modules/primeicons/primeicons.css");
@import url("../node_modules/primeng/resources/themes/saga-orange/theme.css");
@import url("../node_modules/primeng/resources/primeng.min.css");

你也可以 link html head 标签中的样式，但问题是来自 /node_modules 的路径中的 none 有效，所以方法使这项工作是复制样式（从说 /node_modules/primeng/resources/themes/saga-purple/theme.css 到 /assets 中的等效路径并在 link 中使用该路径）- /node_modules [的可能问题=45=]s 不起作用可能是因为 angular 编译过程创建捆绑文件作为 webpack 工作流程的一部分，并且不影响 index.html 其中 link 被引用到 /node_module

    <link rel="stylesheet" id="theme-link" type="text/css" href="assets/themes/saga-purple/theme.css">

Angular 2 - PrimeNg 风格不起作用

Angular 2 - PrimeNg style not working

angular

primeng

如果您正确下载了 PrimeNG，现在应该可以使用了