Bootstrap _reboot.scss overriding PrimeNG styles

Issue

Bootstrap seems to be overriding my PrimeNG styles, more specifically with it's _reboot.scss file. I have included the part's where I have referenced it in my styles.scss and angular.json. I have done some poking around and I have seen it get fixed in vanilla setup with just html and not in an angular environment.

In my styles.scss I have the following at the top:

@import 'modern-normalize/modern-normalize.css';
@import "bootstrap/dist/css/bootstrap.css";
@import 'bootstrap-icons/font/bootstrap-icons';
@import "primeicons/primeicons.css";
@import "primeflex/primeflex.css";
@import "primeng/resources/primeng.min.css";

And then in my angular.json I have the following:

"styles": [
    "modern-normalize/modern-normalize.css",
    "bootstrap-icons/font/bootstrap-icons.css",
    "bootstrap/dist/css/bootstrap.css",
    "primeicons/primeicons.css",
    "primeflex/primeflex.css",
    "primeng/resources/primeng.min.css",
    "src/styles.scss",
    {
        "input": "src/theme-light.scss",
        "bundleName": "light",
        "inject": false
    },
    {
        "input": "src/theme-dark.scss",
        "bundleName": "dark",
        "inject": false
    }
],

Solution

Since it may take a lot of time to approve my edits on @Kino101 's answer Here 's the full answer that works after updating to primng >= 16.4

It appears that PrimeNG CSS (primeng.min.css) is now shipped as layers, which changes the selectors priority.

More info here here.

A solution is to give bootstrap a "layer" with a lower level. To achieve this, simply move the boostrap and primeng CSS references from the styles section of your angular.json to your main css file as follow:

styles.css

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css" layer(bootstrap);
@import "../node_modules/primeng/resources/primeng.min.css";

After that We need to set priority since We can not add the @layer tag to specify layer order in existing angular css/scss : it will remove by angular compilation. We need to create CSS file let's say layer.css like this

layer.css

@layer bootstrap, primeng;

Finally import layer.css in index.html file index.html

  ...
  <link rel="stylesheet" type="text/css" href="assets/styles/layer.css">
  ...

Answered By - Krunal Jethva