Primeng 17 and Bootstrap 5

Question

It is possible to use primeng ^17.6.0 and bootstrap ^5.3.2 in an Angular 17 project? I want to use bootstrap for the public part of my application, but there is an admin section where I would like to use primeng. According to the documentation: https://primeng.org/guides/csslayer#bootstrap I have to use layers and it mentions that I should use bootstrap-reboot.css. Can someone guide me on how I should use this? He intentado lo siguiente:

angular.json

 "styles": [
   "src/styles.scss"
 ],
 "scripts": [
   "node_modules/bootstrap/dist/js/bootstrap.bundle.js"
 ],

package.json

"bootstrap": "^5.3.2",
"primeng": "^17.6.0",

component.html

<button class="btn btn-primary">Bootstrap</button>
<p-button label="Primeng"></p-button>

If I set my styles like this:

styles.scss

@layer bootstrap, primeng;
@import "bootstrap/scss/bootstrap.scss" layer(bootstrap);
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.min.css";

I get the following result:

If I change the order to:

@layer bootstrap, primeng;
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.min.css";
@import "bootstrap/scss/bootstrap.scss" layer(bootstrap);

I get:

If I change to:

@layer reboot, primeng;
@import "bootstrap/scss/bootstrap-reboot.scss" layer(reboot);
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.min.css";

I get:

So is there any way the two can coexist?

Stanger

Answer 1

So is there any way the two can coexist?

I am afraid there is no perfect solution. @layer is a mechanism for cascading, meaning it effects the way in which rules overwrite each others if they target the same element.

@layer bootstrap, primeng; basically means, that every rule declared or imported into primeng layer will overwrite the rules declared or imported into bootstrap layer.

If you are using sass (which I assume as you are using @import "bootstrap/scss/bootstrap-reboot.scss" in your example), a workaround might be to import bootstrap into your admin page like:

// global scss file without style encapsulation
app-admin-page {
  @import "bootstrap/scss/bootstrap-reboot.scss";
}

I am not sure it will lead to your exact desired result, but I think it is worth trying it out.

Hance

Answer 2

I encountered this problem and couldn't find a clear solution. However, instead of importing the entire bootstrap.min.css, I managed to solve it by importing only the bootstrap-grid.css that I needed. Here's the final version of styles.scss:

$gutter: 1rem; //for primeflex grid system

@import 'bootstrap/dist/css/bootstrap-grid.css';
@import 'libs/sakai/src/assets/layout/styles/layout/layout.scss';

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

Also, it should be noted that the CSS file of Bootstrap should be imported instead of the SCSS file.

For example, instead of:

@import 'bootstrap/scss/bootstrap-grid.scss';

it should be imported like this:

@import 'bootstrap/dist/css/bootstrap-grid.css';

Boating