Angular 6 production mode removes Bootswatch theme?

Question

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

can you share your package.json to check the dependencies, also note that if you want something to be in the prod build refrain from including in devDependencies instead include in dependencies section in package.json. — Avinash, Jun 27 '18 at 15:20
Are you sure there is a `dist` in `"node_modules/bootswatch/dist/lumen/bootstrap.min.css"` ? Not in mine — fallais, May 24 '19 at 13:24

ataravati · Answer 1 · 2019-10-01T18:45:34.100

2

I know this is a late answer, but the accepted answer is wrong. You should replace the original bootstrap.min.css with the Bootswatch one. Bootsatch's CSS files are supposed to replace the original bootstrap CSS file. So, in your angular.json you just need to have:

"styles": [
  "node_modules/bootswatch/dist/lumen/bootstrap.min.css",
  "src/styles.css"
],

edited Oct 01 '19 at 18:45

answered Oct 01 '19 at 17:45

ataravati

8,891
9
57
89

1

You are right about bootswatch themes being replacements for bootstrap itself, however, I think the issue I had in 2018 was that the import didn't work in `angular.json` and had to be moved to `styles.css`. – workerjoe Oct 02 '19 at 12:12

score 1 · Accepted Answer · answered Jun 27 '18 at 16:34

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"
],

answered Jun 27 '18 at 16:34

Avinash

1,245
11
19

@Avinash, Bootswatch css files are supposed to replace the original bootstrap css. What you are doing is adding the bootstrap css first, and then overwriting it with the Bootswatch one. That's obviously wrong. – ataravati Oct 24 '19 at 14:12

score 0 · Answer 3 · answered Jul 21 '19 at 19:10

0

Surely it's:

"styles": [
   "src/styles.css"
],

answered Jul 21 '19 at 19:10

englishPete

809
10
15

Angular 6 production mode removes Bootswatch theme?

3 Answers3