PrimeNG 18 如何解决 primeng.css 无法解析？

2026-11-06数据阿明

结论

PrimeNG 18 已移除 primeng/resources/primeng.css，调整导入路径无法解决问题。应改用 PrimeNG 18 的 styled mode：删除旧的 primeng/resources 样式引用，并在 Angular 启动配置中通过 providePrimeNG 设置主题预设。PrimeNG 迁移指南也指出，旧版 Sass 主题需要按照新的主题 API 重新创建。PrimeNG 18 迁移指南 PrimeNG 18 主题配置

配置步骤

安装与项目 PrimeNG 18 主版本兼容的主题包：

npm install @primeng/themes

然后在 app.config.ts 中配置主题。下面以 Aura 为例：

import { ApplicationConfig } from '@angular/core';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';

export const appConfig: ApplicationConfig = {
  providers: [
    providePrimeNG({
      theme: {
        preset: Aura
      }
    })
  ]
};

PrimeNG 18 提供 Aura、Material、Lara 和 Nora 等预设。PrimeNG 18 安装配置

接着修改 style.scss，删除 primeng/resources/primeng.css。你导入的 ./assets/theme/themes/posm/aura-light/blue/theme.scss 看起来是旧版 Sass 主题。如果它定义的是 PrimeNG v17 主题，也需要迁移为 v18 的主题预设或自定义 preset，旧主题文件无法继续用于生成 PrimeNG v18 样式。

@import "./assets/icons/menu-icons.scss";
@import "./assets/icons/report-menu-icons.scss";
@import "primeicons/primeicons.css";
@import "../node_modules/quill/dist/quill.core.css";
@import "../node_modules/quill/dist/quill.snow.css";

CSS layer 注意事项

要让 PrimeNG 样式位于 primeng CSS layer 中，请在主题配置中启用 cssLayer，并按需声明 layer 顺序：

providePrimeNG({
  theme: {
    preset: Aura,
    options: {
      cssLayer: true
    }
  }
})

@layer reset, primeng;

如果未启用 CSS layer，可以删除原来的 @layer primeng; 声明。是否保留其他图标和 Quill 样式，取决于应用是否仍在使用它们；这些导入不会导致 primeng.css 缺失。