I had developed an angular project which has structure in applications and library in bootstrap 3 months ago. Now I need to migrate the whole project to primeNg components. So I rewritten the applicaiton components in PrimeNg, but due lack of time I am unable to migrate the library components into primeNg. So for temparary solution I want merge the library components with bootstrap and main application components with primeNg css, but I am unable to merge I am getting mixin and same class tags conflicts and primeNg css got overriding with bootstrap css. How can I apply/load bootstrap css to only library components without conflicting to main application.

Packages for main application

"dependencies": { "@angular/animations": "^18.1.0", "@angular/common": "^18.1.0", "@angular/compiler": "^18.1.0", "@angular/core": "^18.1.0", "@angular/forms": "^18.1.0", "@angular/platform-browser": "^18.1.0", "@angular/platform-browser-dynamic": "^18.1.0", "@angular/platform-server": "^18.1.0", "@angular/router": "^18.1.0", "@angular/ssr": "^18.1.1", "express": "^4.18.2", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3", "chart.js": "4.4.2", "normalize.css": "^8.0.1", "primeflex": "^3.3.1", "primeicons": "^7.0.0", "primeng": "^17.18.4", "quill": "2.0.2", "keycloak-angular": "^16.0.1", "keycloak-js": "^25.0.1" }, "devDependencies": { "@angular-devkit/build-angular": "^18.1.1", "@angular/cli": "^18.1.0", "@angular/compiler-cli": "^18.1.0", "@types/express": "^4.17.17", "@types/jasmine": "~5.1.0", "@types/node": "^18.18.0", "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "ng-packagr": "^18.1.0", "typescript": "~5.5.2" }

Packages for Library

{
  "name": "usermgmt",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^18.1.0",
    "@angular/core": "^18.1.0"
  },
  "dependencies": {
    "tslib": "^2.3.0",
    "@ng-bootstrap/ng-bootstrap": "^17.0.0",
    "@ng-select/ng-select": "^13.4.1",
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.2",
    "bootstrap-icons": "^1.11.3",
    "file-saver": "^2.0.5",
    "google-libphonenumber": "^3.2.35",
    "intl-tel-input": "^23.3.2",
    "keycloak-angular": "^16.0.1",
    "keycloak-js": "^25.0.1",
    "ng-zorro-antd": "^18.0.1",
    "ngx-bootstrap": "^18.0.2",
    "ngx-export-as": "^1.16.0",
    "ngx-intl-tel-input": "^3.2.0",
    "ngx-pagination": "^6.0.3",
    "ngx-ui-loader": "^13.0.0",
    "highcharts": "10.2.1",
    "highcharts-angular": "3.0.0",
    "highcharts-custom-events": "^3.0.10"
  },
  "devDependencies": {
    "@types/file-saver": "^2.0.7"
  },
  "sideEffects": false
}

I am using angular 18.1.0 version.

styles.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import 'normalize.css/normalize.css';

@import 'primeflex/primeflex.scss';
@import './assets/scss/project_variable';
@import './assets/tabler-icons/tabler-icons.scss';
@import './assets/scss/primengTheme/themes/mytheme/theme.scss';
@import "primeng/resources/primeng.min.css";

for bootstrap I created a custom css file but I unable to load that css file for library components.

custom-styles.css

    @import 'bootstrap-icons/font/bootstrap-icons';
    @import 'bootstrap/scss/bootstrap';
    @import 'ngx-toastr/toastr-bs5-alert';
    @import 'intl-tel-input/build/css/intlTelInput.css';
    @import "@ng-select/ng-select/themes/default.theme.css";
    @import 'ng-zorro-antd/ng-zorro-antd.min.css';
   

Packages for main application

"dependencies": { "@angular/animations": "^18.1.0", "@angular/common": "^18.1.0", "@angular/compiler": "^18.1.0", "@angular/core": "^18.1.0", "@angular/forms": "^18.1.0", "@angular/platform-browser": "^18.1.0", "@angular/platform-browser-dynamic": "^18.1.0", "@angular/platform-server": "^18.1.0", "@angular/router": "^18.1.0", "@angular/ssr": "^18.1.1", "express": "^4.18.2", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.3", "chart.js": "4.4.2", "normalize.css": "^8.0.1", "primeflex": "^3.3.1", "primeicons": "^7.0.0", "primeng": "^17.18.4", "quill": "2.0.2", "keycloak-angular": "^16.0.1", "keycloak-js": "^25.0.1" }, "devDependencies": { "@angular-devkit/build-angular": "^18.1.1", "@angular/cli": "^18.1.0", "@angular/compiler-cli": "^18.1.0", "@types/express": "^4.17.17", "@types/jasmine": "~5.1.0", "@types/node": "^18.18.0", "jasmine-core": "~5.1.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "ng-packagr": "^18.1.0", "typescript": "~5.5.2" }

Packages for Library

{
  "name": "usermgmt",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^18.1.0",
    "@angular/core": "^18.1.0"
  },
  "dependencies": {
    "tslib": "^2.3.0",
    "@ng-bootstrap/ng-bootstrap": "^17.0.0",
    "@ng-select/ng-select": "^13.4.1",
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.2",
    "bootstrap-icons": "^1.11.3",
    "file-saver": "^2.0.5",
    "google-libphonenumber": "^3.2.35",
    "intl-tel-input": "^23.3.2",
    "keycloak-angular": "^16.0.1",
    "keycloak-js": "^25.0.1",
    "ng-zorro-antd": "^18.0.1",
    "ngx-bootstrap": "^18.0.2",
    "ngx-export-as": "^1.16.0",
    "ngx-intl-tel-input": "^3.2.0",
    "ngx-pagination": "^6.0.3",
    "ngx-ui-loader": "^13.0.0",
    "highcharts": "10.2.1",
    "highcharts-angular": "3.0.0",
    "highcharts-custom-events": "^3.0.10"
  },
  "devDependencies": {
    "@types/file-saver": "^2.0.7"
  },
  "sideEffects": false
}

I am using angular 18.1.0 version.

styles.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import 'normalize.css/normalize.css';

@import 'primeflex/primeflex.scss';
@import './assets/scss/project_variable';
@import './assets/tabler-icons/tabler-icons.scss';
@import './assets/scss/primengTheme/themes/mytheme/theme.scss';
@import "primeng/resources/primeng.min.css";

for bootstrap I created a custom css file but I unable to load that css file for library components.

custom-styles.css

    @import 'bootstrap-icons/font/bootstrap-icons';
    @import 'bootstrap/scss/bootstrap';
    @import 'ngx-toastr/toastr-bs5-alert';
    @import 'intl-tel-input/build/css/intlTelInput.css';
    @import "@ng-select/ng-select/themes/default.theme.css";
    @import 'ng-zorro-antd/ng-zorro-antd.min.css';
   

I tried by maintaining the primeNg imports in global styles.scss file and created a custom scss file for bootstrap imports even loading this custom css file for library components not getting applied.