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

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