34

By default everything is bundled in:

  • inline.bundle.js
  • polyfills.bundle.js
  • styles.bundle.js
  • vendor.bundle.js
  • main.bundle.js

Is it possible to have separate CSS file?

Stepan Suvorov
  • 25,118
  • 26
  • 108
  • 176
  • separation based upon what kind of criteria..? – n00dl3 Feb 21 '17 at 15:05
  • 6
    CSS criteria :) – Stepan Suvorov Feb 21 '17 at 15:14
  • oh, you mean load the css files at runtime based on styleURLs ? (that sounds like a preformance killer) – n00dl3 Feb 21 '17 at 15:16
  • no, just compile all css assets into one file, CSS file, not JS file. – Stepan Suvorov Feb 21 '17 at 15:42
  • that sounds against the angular component pattern... I don't think that's possible... But I guess you could do this if you skip angular-cli and create your own webpack-loader. – n00dl3 Feb 21 '17 at 15:44
  • 4
    "against the angular component pattern" - that's true. Unfortunately I have to do it. To make possible to load different style-themes – Stepan Suvorov Feb 21 '17 at 15:45
  • @StepanSuvorov You met exactly the same situation as I now. I needed to use specific theme (from specific file) according to value in config.json file and, unfortunately, angular still doesn't support variable interpolation in SCSS \@import path, so this was the only possible way how to implement this... – Frimlik Jun 03 '21 at 05:56
  • The docs are terrible for loading multiple themes. There ought to be a standardized way. They actually suggest just changing the path of the css include to `/path/to/styles.css` with no further guidance. – Simon_Weaver Feb 22 '23 at 18:54

3 Answers3

49

Yes! In your angular.json file the common thing to do is

"styles": [
  "styles/bootstrap.scss",
  "styles/app.scss",
  "styles/whatever-else.scss"
]

and that all gets combined into a dist/styles.5d56937b24df63b1d01d.css file or whatever it decides to name it.

INSTEAD you can use the object notation defined here

"styles": [
  {
    "input": "styles/bootstrap.scss",
    "bundleName": "bootstrap"
  },
  {
    "input": "styles/app.scss",
    "bundleName": "app"
  },
  {
    "input": "styles/whatever-else.scss",
    "bundleName": "foo-bar"
  },
]

and this will generate 3 separate CSS files:

  • dist/bootstrap.*.css
  • dist/app.*.css
  • dist/foo-bar.*.css
Dan Atkinson
  • 11,391
  • 14
  • 81
  • 114
Chris Barr
  • 29,851
  • 23
  • 95
  • 135
  • 2
    Excellent I have read that wiki page numerous times, but missed the `object format` section! – Drenai Aug 08 '19 at 18:29
  • 2
    @CBarr is there a way to get the hash url? because i dont know how i get the path for include it with js in after the app gets initialized... – Budi Jan 28 '20 at 15:20
  • @CBarr , how can I switch between these bundles in runtime? – Mironline Jun 11 '21 at 14:12
  • @Mironline I am not sure that would be possible to do, at least not simply. I'm not familiar with how that might be done if it is possible. – Chris Barr Jun 13 '21 at 19:00
  • 1
    @Budi @Mironline if you include `inject: false`, the bundled css is not injected and the file is not hashed and can be loaded using any mean. – oBusk Jun 07 '22 at 19:53
25

As @Rob correctly pointed out you can use flag --extract-css. Unfortunately this flag is not possible to use with ng-serve from Angular 6+.

If you want to extract css in both ng build and ng-serve you can edit angular.json file in below section architect -> build -> options add new option "extractCss": true

Andurit
  • 5,612
  • 14
  • 69
  • 121
18

You can do this using --extract-css flag of ng build. This is the default in --prod mode. More details here: https://github.com/angular/angular-cli/wiki/build

Rob
  • 3,687
  • 2
  • 32
  • 40
  • 1
    `--extract-css` IS Deprecated since version 11.0. No longer required to disable CSS extraction for HMR. – Littlee Jun 30 '21 at 05:56