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.
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"
}
}