未找到 PrimeNG 样式表

Posted 2023-03-07

【中文标题】未找到 PrimeNG 样式表

【英文标题】：PrimeNG stylesheets not found

【发布时间】：2017-02-18 23:57:39

【问题描述】：

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

我正在使用 Angular Class WebPack Starter，我添加了 PrimeNG，但如上所述，我收到 404 错误。虽然这没有多大意义，但我怀疑这与样式表位于 node_modules 文件夹中的事实有关。作为测试，我将.css 文件放在node_modules 文件夹中，但没有找到。但是，当将文件放入公共资产的“全局”文件夹中时。

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

将测试样式表移至 public 文件夹和 PrimeNG 主题的屏幕截图

我知道这是一个小问题，但我似乎找不到任何信息。以防万一我也看过 PrimeNG's setup 页面，但它并没有什么不同。

【参考方案1】：

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

这篇文章帮助了我：Example of how to load static CSS files from node_modules using webpack?

我只是按照上面提到的帖子中的说明将其添加到我的 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);

希望这会有所帮助。

【参考方案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
]

【参考方案3】：

确保“styles”数组包括“build”和“test”下的prime 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"
],

其他样式表可能已经存在。其他主题可用。