CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-5primeng
Justin de Gois
Justin de Gois

Reputation: 109

Bootstrap _reboot.scss overriding PrimeNG styles

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
    }
],

Upvotes: 7

Views: 4315

Answers (4)

Krunal Jethva
Krunal Jethva

Reputation: 325

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 scss file as follow:

styles.scss

@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

Create this file in your project assets folder (e.g., assets/styles/layer.css), it should contain the following.

@layer bootstrap, primeng;

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

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

Upvotes: 13

Kino101
Kino101

Reputation: 993

I also had this problem after updating my PrimeNG version to >=16.4.

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

More info 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";

Upvotes: 2

Ion Ursachi
Ion Ursachi

Reputation: 41

I had the same issue which I solved by switching from css to scss and importing only few components from bootstrap and ignoring the reboot file.

_bootstrap.scss

// Configuration
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/variables-dark";
@import "node_modules/bootstrap/scss/maps";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/utilities";    

// Layout & components
@import "node_modules/bootstrap/scss/root";
//@import "node_modules/bootstrap/scss/reboot";

// Custom reboot if needed (i.e. .table, .h1, ...)

// Layout & components
@import "node_modules/bootstrap/scss/containers";
@import "node_modules/bootstrap/scss/grid";
@import "node_modules/bootstrap/scss/tables";
@import "node_modules/bootstrap/scss/forms";

// Helpers
@import "node_modules/bootstrap/scss/helpers";

// Utilities
@import "node_modules/bootstrap/scss/utilities/api";

_primeng.scss

@import 'node_modules/primeicons/primeicons.css';
@import "node_modules/primeng/resources/themes/saga-green/theme.css";
@import "node_modules/primeng/resources/primeng.css";

styles.scss

@import 'bootstrap';
@import 'primeng';

Upvotes: 3

Suryaprakash
Suryaprakash

Reputation: 86

Try to replace the primeng in top of the styles and check

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

Upvotes: 1

Related Questions