I have an Angular 6 app using Bootstrap 4 and a Bootswatch theme (Lumen). The styles and the theme work fine when I compile the site in my test environment using ng serve and also work fine when compiled for my nginx webserver with ng build. However, when compiling in production mode (ng build --prod) for the webserver, the basic Bootstrap styles work but the Bootswatch theme is apparently not loaded or not effective. The site looks like plain vanilla Bootstrap 4.
My installation process with the Angular CLI was:
npm install --save bootstrap
npm install --save @ng-boostrap/ng-bootstrap
npm install bootswatch
The "styles" segment of my angular.json is as follows:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootswatch/dist/lumen/bootstrap.min.css",
"src/styles.css"
],
What's up with the production mode that kills my theme? And how can I solve it?
Edit: my package.json as requested by a comment:
{
"name": "neo-analytics",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"@ng-bootstrap/ng-bootstrap": "^2.1.1",
"bootstrap": "^4.1.1",
"bootswatch": "^4.1.1",
"core-js": "^2.5.4",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.2.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.3",
"@angular-devkit/build-angular": "~0.6.8",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.8",
"@angular/language-service": "^6.0.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}
}
Instead of adding directly under the styles[ ] in angular.json can you try by adding in styles.css:
styles.css
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
@import "../node_modules/bootswatch/dist/lumen/bootstrap.min.css";
angular.json
"styles": [
"styles.css"
],