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

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

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)