未找到 PrimeNG 样式表

Question

我刚刚创建的新项目遇到了问题。由于某种原因，当尝试导入 PrimeNG 的样式表时，我收到 404 错误。不知道是不是和我项目的配置有关

我正在使用 Angular Class WebPack Starter，我添加了 PrimeNG，但如上所述，我收到了 404 错误。虽然这没有多大意义，但我怀疑它与样式表位于

node_modules

文件夹中这一事实有关。作为测试，我将

.css

文件放入

node_modules

文件夹中，但找不到。但是，当放入我的公共资产的“全局”文件夹时，找到了该文件。

带有测试样式表和 PrimeNG 主题的屏幕截图

测试样式表移至

public

文件夹和 PrimeNG 主题的屏幕截图

我知道这是一个微不足道的问题，但我似乎找不到任何信息。以防万一，我也查看了 PrimeNG 的设置 页面，但它没有什么区别。

Answer 1

我在 Angular2 应用程序中遇到了同样的问题，并通过将 .css 文件直接导入到我的 main.ts 脚本中来设法解决该问题。

这篇文章对我有帮助：如何使用 webpack 从 node_modules 加载静态 CSS 文件的示例？

我只是按照上面提到的帖子中的说明进行操作，并将其添加到我的 main.ts 中。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import 'primeng/resources/themes/afterdark/theme.css';
import 'font-awesome/css/font-awesome.min.css';
import 'primeng/resources/primeng.min.css';

import { AppModule } from './modules/app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

希望这有帮助。

Answer 2

我遇到了与丢失 css 文件相关的相同问题，如果您使用 Angular-cli 来构建项目，请按照以下步骤操作：

1-编辑项目的 angular-cli.json 文件

2-通过添加所需的 css 文件来更新样式部分，如下所示：

"styles": [
    "styles.css", // default generated one
    "../node_modules/primeng/resources/themes/omega/theme.css" , //primeng css
    "../node_modules/primeng/resources/primeng.css" //primeng css
]

Answer 3

确保“styles”数组包含“build”和“test”下的主要 ng 样式表（在“projects”下项目的“architect”下）：

"styles": [
  "./node_modules/primeicons/primeicons.css",
  "./node_modules/primeng/resources/themes/nova-light/theme.css",
  "./node_modules/primeng/resources/primeng.min.css"
],

其他样式表可能已经存在。还有其他主题可供选择。

Answer 4

对于 Angular 19.x 和最新版本的

primeng

，即：

• "@primeng/themes": "^19.0.5"

• "primeicons": "^7.0.0"

• "primeng": "^19.0.5"

PrimeNg 安装

1. 安装以上所有库。
2. 安装

   ng-bootstrap

   和兼容的

   bootstrap

   版本。对我来说，这些版本是：

"@ng-bootstrap/ng-bootstrap": "^18.0.0",
"bootstrap": "^5.3.3"

3. 在

   angular.json

   ：

"scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/primeicons/primeicons.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ]

主题加载

主题在最新版本中已更改位置，并且不再位于

/node_modules/primeng/resources/themes/

中。为了加载您喜欢的主题，您可以按照以下步骤操作：

1. 在

   app.module.ts

   中导入以下内容：

import Material from '@primeng/themes/material';
import { providePrimeNG } from 'primeng/config';
import { provideAnimations } from '@angular/platform-browser/animations';

2. 在

   providers[...]

   数组中传递以下内容：

    provideAnimations(),
    providePrimeNG({
      theme: {
        preset: Material,
        options: {
          prefix: 'p',
          darkModeSelector: '.dark-theme'
        }
      },
      ripple: true
    }),