Angular 6 multiple css files in the dist

Question

I'm working on the SAAS product with the client customization. Basically, we keep one SCSS entry point for generic styling and want to keep an additional entry point per brand. The problem is when I define an array in the angular.json it compiles all into the single css file. I want to have a file with generic css and a css file per client. Is it possible to do with angular-cli?

Answer 1

Basically, I found the answer myself. It's possible to use the following syntax in the angular.json:

"styles": [
    "src/styles.css",
    { "input": "src/pre-rename-style.scss", "bundleName": "renamed-style" }
],

Here is the link to documentation: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/global-styles.md

Answer 2

Update 2020: use option "inject: false" if you want to tell the Angular CLI to NOT include the styles right away if you want to include them later. Older versions of Angular use "lazy" instead of inject.

 "styles": [
    "src/styles.scss",
        {
          "input": "src/styles/themes/dark.scss",
           "bundleName": "dark",                
           "lazy": false
        }
    ]