升级PrimeNG至15.0.0后p-grid样式无法正常生效求助

1. 调整样式导入顺序 #

Angular的样式加载顺序会影响优先级，必须确保primeflex.scss在Harmony主题样式之前导入：

• 在styles.scss中修改顺序：

// 先导入PrimeFlex基础样式
@import "primeflex/primeflex";
// 再导入Harmony主题的自定义样式
@import "./assets/harmony-ng-15/theme/styles";

• 如果在angular.json的styles数组中配置，同样要保持PrimeFlex的优先级：

"styles": [
  "node_modules/primeflex/primeflex.scss",
  "src/styles.scss",
  "src/assets/harmony-ng-15/theme.scss"
]

2. 重新安装PrimeFlex依赖 #

避免依赖安装异常导致的样式缺失，执行以下命令重装：

npm uninstall primeflex
npm install primeflex@3.2.1 --save

3. 排查主题样式覆盖问题 #

部分模板主题会自定义Grid相关样式，打开Harmony主题的SCSS文件，搜索p-grid、p-col关键词：

• 如果发现主题重写了这些类的核心样式（比如把display: flex改成了其他值），可以删除该段自定义代码（若不需要主题的Grid定制）
• 应急方案：在组件SCSS中强制生效基础样式（不推荐长期使用）：

.p-grid {
  display: flex !important;
  flex-wrap: wrap !important;
}
.p-col {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
}

4. 清除缓存并重启服务 #

Angular的缓存可能残留旧样式，执行以下命令彻底清理：

ng build --delete-output-path
ng serve --open --no-cache

5. 检查类名拼写正确性 #

确认组件中使用的是PrimeFlex 3.x的p-前缀类名，比如p-grid、p-col-6，而非无前缀的grid、col-6。

内容的提问来源于stack exchange，提问作者davidArchA