Angular 6 - Custom CSS not being loaded when in production

Question

I've included a Bootstrap theme into my app. I've copied the file into src folder (the same level as styles.css) and added it as the last css in angular.json like this:

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/WFRH-Web",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/web.config"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/bootstrap-select/dist/css/bootstrap-select.min.css",
              "src/theme_minco.min.css"

and the styles are working correctly when in dev mode but they don't work after deploying my app.

The steps I use for deploying are:

1) ng build --prod
2) firebase deploy

I've also tried using an include in styles.css and only leaving styles.css in angular.json like this:

@import "theme_minco.min.css";

to no avail because it's not working either (it only works in dev).

Any help, please?

Answer 1

Disable the extractCss flag in angular.json for your prod configuration