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?

May you prepare a minimal reproducible example ? What happens if you run ng serve --prod ? — Massimo Costa
– Massimo Costa, Commented Sep 26, 2018 at 7:28
Thank you very much for your quick response @Massimo Costa. Good point, I've tried ng serve --prod and it does not work either, so the problem should be around compiling to prod but I'm not sure how to prepare you an example. — Diego Perez
– Diego Perez, Commented Sep 26, 2018 at 7:33
I guess that as it's a Bootstrap theme (they use the same classes) it could have to do with Boootstrap classes getting mixed with theme classes or theme classes being loaded before Bootstrap classes. I'm investigating this and I'll think in a way of preparing a demo. — Diego Perez
– Diego Perez, Commented Sep 26, 2018 at 7:51
We had a similar prob, try disabling the extractCss flag in angular.json for your prod configuration — danday74
– danday74, Commented Sep 26, 2018 at 8:06

danday74 · Accepted Answer · 2018-09-26 09:10:19Z

16

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

answered Sep 26, 2018 at 9:10

danday74

58k56 gold badges273 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 6 - Custom CSS not being loaded when in production

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related