Is it possible to build separate CSS file with angular-cli?

Question

By default everything is bundled in:

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

Answer 1

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

Answer 2

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

Answer 3

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