After PrimeNG Upgrade to 15.0.0 "p-grid" styles are not working

Question

Currently I am working on Primeng upgradation in Angular 15.

Scenario: As per requirement we are upgrading Angular12 PrimeNG(harmony-ng-12.2.0) project to Angular 15 along with PrimeNG((harmony-ng-15.0.0). “harmony-ng is a templet used for this project”. First, we did Angular upgradation from 12 to 15. After that we Upgraded PrimeNG to below versions.

“ "primeflex": "^3.2.1", "primeicons": "6.0.1", "primeng": "15.1.1", ” As per the documentation we replaced local asset folders (SCSS,theme) with harmony-ng-15.0.0 assets folders. Application functionality wise working fine.

Problem: The theme got disturbed mainly “p-grid,p-col” related scss styles are not applying to the template.In node modules I am able to see the “PrimeFlex” but the styles are not applying to components.

We added “primeflex.scss” reference in angular.json and styles.scss files as below. But no use with these changes.

in angular.json file

"styles": [
          "src/styles.scss",
          "node_modules/primeflex/primeflex.scss"
        ],

In Styles.scss file:

@import "../node_modules/primeng/resources/primeng.min.css";
@import "../node_modules/primeflex/primeflex.scss";
@import "../node_modules/primeicons/primeicons.css";

Also tried with changes suggested in below link. No luck with it. https://github.com/orgs/primefaces/discussions/130

Need help to resolve this issue.

Thank you.

Answer 1

Please note that moving from primeflex 2.0.x to primeflex 3.0.x versions, most of classes have lost the

p-

prime prefix, so:

• p-grid > grid
• p-col > col

and so on. Better to check on official documentation the new name of related classes. We faced a similar migration and had to rename all primeflex classes. Also double check if primeflex.scss is the one related to the latest installation.