logo标签列表

Angular 2 - PrimeNg 样式不起作用

angularprimeng
17

我已经按照指示通过运行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）并将其添加到我的组件中，但样式与普通复选框相同。

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

这些样式应该添加到另一个文件中吗？ 我不确定为什么它不起作用。

你是否使用了 src 和 dist 文件夹来分离代码文件？同时，当你遵循这种方式时有什么问题吗？是复选框未显示还是样式丢失？ - Aravind
@Aravind - 我没有使用dist文件夹，所有代码都在src中。复选框出现在页面上，但没有应用样式（只是普通的复选框）。我在Chrome中得到的错误是404，例如GET http://localhost:4200/node_modules/primeng/resources/themes/omega/theme.css。即使我可以在app_module中手动定位文件，但我对所有三个样式表都会得到这个错误。 - ToDo
8个回答
14

我解决了我的问题，方法是从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';
11

我找到了一篇使用Angular CLI和PrimeNg的教程，对我很有用。

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

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

11

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

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

如果您已经正确下载了PrimeNG，它现在应该可以正常工作了

注意一下：请确保您已经在正确的位置导入了primeNG模块（实际上，我们导入的是模块而不是组件，请注意;）

如果您没有使用Angular CLI，您可以通过在index.html中使用<link>元素来包含预构建的主题。 - Smaillns
奇怪的是，这个解决方案对我起作用了，尽管我完全按照设置页面操作，为什么只有这个解决方案对我起作用，特别是这一行在文档中根本没有提到...？ - Akyo
这对我有效，因为我正在使用Angular 8。所选答案适用于早期版本的Angular和primeng。 - retrovius
11

自从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");
  • 同时，您也可以在html head标记中链接样式表，但是问题在于/node_modules路径下的样式表都不能正常工作，因此要使其工作的方法是将样式表（例如从/node_modules/primeng/resources/themes/saga-purple/theme.cs复制到相等路径的/assets目录，并将该路径用于链接）- /node_modules路径无法工作的可能原因是由于angular编译进程在webpack工作流程的一部分中创建打包文件，并且不会影响引用到/node_module路径的index.html文件。
    <link rel="stylesheet" id="theme-link" type="text/css" href="assets/themes/saga-purple/theme.css">
4
根据设置说明，您应该使用以下内容：
<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"

希望这有所帮助！ :)
2

刚升级到PrimeNG 6.1.6，出现了这个错误。

看起来在这个版本中，主题已经停止使用theme.css而改用theme.scss。因此，在angular.json的“styles”部分中，您需要引用“node_modules/primeng/resources/themes/omega/theme.scss”（而不是“theme.css”）并且...

您需要运行npm rebuild node-sass。

如果您打开theme.scss文件，您会看到第一行写着“已弃用：请使用nova代替”。如果您查看，会发现有一个名为nova-light的主题，其中包含一个普通的theme.css文件。 - Judah Gabriel Himango
1
如果你在使用命令行界面，那么项目结构应该怎么设置呢？你需要将这些内容添加到styles.css中。总体而言，它们应该打包在一起。
0
在 styles.css 文件中添加 @imports。
@import "~primeicons/primeicons.css";
@import "~primeflex/primeflex.css";
@import "~primeng/resources/themes/fluent-light/theme.css";
@import "~primeng/resources/primeng.min.css";
@import "~font-awesome/css/font-awesome.css";

对于其他主题，请前往nodemoules/primeng/resources/themes并选择主题

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接