1

I'm trying to replace the standard colors in Bootstrap 5.2.3 in my Angular 15 application, to have .btn-primary of my app primary color but without success.

My package.json is:

{
  "name": "example",
  "version": "2.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "npx eslint 'src/**/*.{ts,html}' --quiet --fix"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/cdk": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "@fortawesome/angular-fontawesome": "^0.12.1",
    "@fortawesome/fontawesome-svg-core": "^6.3.0",
    "@fortawesome/free-solid-svg-icons": "^6.3.0",
    "@ng-bootstrap/ng-bootstrap": "^14.0.1",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.3",
    "chart.js": "^3.6.0",
    "ng2-charts": "^4.1.1",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.0",
    "@angular-eslint/builder": "15.2.1",
    "@angular-eslint/eslint-plugin": "15.2.1",
    "@angular-eslint/eslint-plugin-template": "15.2.1",
    "@angular-eslint/schematics": "15.2.1",
    "@angular-eslint/template-parser": "15.2.1",
    "@angular/cli": "^15.2.0",
    "@angular/compiler-cli": "^15.2.0",
    "@angular/localize": "^15.2.0",
    "@types/d3": "^7.1.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
    "eslint": "^8.28.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-typescript": "^0.14.0",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.8.4"
  }
}

And in my styles.scss I do:


@import "../node_modules/bootstrap/scss/_functions";
@import "../node_modules/bootstrap/scss/_variables";
@import "../node_modules/bootstrap/scss/_maps";
@import "../node_modules/bootstrap/scss/_utilities";
@import "../node_modules/bootstrap/scss/_mixins";


:root {
  $primary: #8FBE43;
}
$primary: #8FBE43;

* { // override bootstrap colors
  --bs-primary: #fff;
  --bs-primary-rgb: 255, 255, 255;

  $primary: #8FBE43;
  $theme-colors: (
    "primary": #fff
  );
}

@import '../node_modules/bootstrap/scss/bootstrap';

I've tried already to change the root element from * to :root without success. I've tested that the file is currently read by the application by adding some static fuctions, and indeed it works.

Does anyone have any suggestion? Thanks!

Tried to remove ng-bootstrap to see if it was there the problem. Tried to change import order.

Barone
  • 13
  • 2

1 Answers1

1

Check the styles array in the angular.json file. Remove Bootstrap CSS file. Include your SCSS file(s).

The code below works.

index.html

<html>
  <head>
    <title>My app</title>
  </head>
  <body>
    <button type="button" class="btn btn-primary">Button</button>
  </body>
</html>

styles.scss

$primary: #8fbe43;
@import '~bootstrap/scss/bootstrap';

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "demo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/demo",
            "index": "src/index.html",
            "main": "src/main.ts",
            "assets": [],
            "styles": ["src/styles.scss"], // Check this
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "demo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "demo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "demo:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": ["styles.scss"],
            "scripts": [],
            "assets": ["src/favicon.ico", "src/assets"]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  },
  "defaultProject": "demo"
}

package.json

{
  "name": "qgnioqqrg.github",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "dependencies": {
    "@angular/animations": "^15.1.2",
    "@angular/common": "^15.1.2",
    "@angular/compiler": "^15.1.2",
    "@angular/core": "^15.1.2",
    "@angular/forms": "^15.1.2",
    "@angular/platform-browser": "^15.1.2",
    "@angular/platform-browser-dynamic": "^15.1.2",
    "@angular/router": "^15.1.2",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.3",
    "rxjs": "^7.8.0",
    "tslib": "^2.5.0",
    "zone.js": "^0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "15.1.0-next.2",
    "@angular/cli": "15.1.0-next.2",
    "@angular/compiler-cli": "15.1.0-next.2",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.7.2"
  }
}
Rok Benko
  • 14,265
  • 2
  • 24
  • 49