Angular-cli - How to output a certain scss file to a diferent file than the bundle css

[humarkx]

This is the case:

I have all the scss files imported into styles.scss, so when it compiles, it gives me, a bundle styles.css.

All i want is to have a styles.scss and a custom.scss that after build, it will generate a syles.css and a custom.css. Not only a bundle but 2 diferent output files.

Thanks

[filipesilva]

Heya, have a look at https://github.com/angular/angular-cli/wiki/stories-global-styles, you can see input and output properties in the alternative configuration item. That allows you to select what the output file is.

[xmlking]

I want to produce css from scss so that I can load .css dynamically based on theme selected by user.

expected output:
dist/app/styles/themes/deeppurple-amber.css
dist/app/styles/themes/indigo-pink.css
dist/app/styles/themes/pink-bluegrey.css
dist/app/styles/themes/purple-green.css

I tryed this , but I getting .js instead of .css

      "styles": [
        "styles.scss",
        { "input": "styles/themes/deeppurple-amber.scss", "lazy": true },
        { "input": "styles/themes/indigo-pink.scss", "lazy": true },
        { "input": "styles/themes/pink-bluegrey.scss", "lazy": true },
        { "input": "styles/themes/purple-green.scss", "lazy": true }
      ],

is there a way to accomplish what I needed using angular-cli ?

[Beni90]

@xmlking did you find a solution for this?

[xmlking]

@Beni90 not a clean solution but created an extra webpack config and using webpack --config tools/webpack.config.js command as part of build process:

Ref:
https://github.com/xmlking/nx-starter-kit/blob/master/tools/webpack.config.js

https://github.com/xmlking/nx-starter-kit/blob/master/package.json#L22

[hgopi]

@xmlking You could use ng build --extract-css to output the styles to css files.

[xmlking]

thanks @hgopi . I solved this with following setup

.angular-cli.json

      "styles": [
        "styles.scss",
        {
          "input": "styles/themes/deeppurple-amber.scss",
          "output": "assets/themes/deeppurple-amber",
          "lazy": true
        },
        {
          "input": "styles/themes/indigo-pink.scss",
          "output": "assets/themes/indigo-pink",
          "lazy": true
        },
        {
          "input": "styles/themes/pink-bluegrey.scss",
          "output": "assets/themes/pink-bluegrey",
          "lazy": true
        },
        {
          "input": "styles/themes/purple-green.scss",
          "output": "assets/themes/purple-green",
          "lazy": true
        }
      ],

dev serve

ng s -e mock --extract-css --preserve-symlinks -o

prod build

ng build --prod -oh=media

[FirstVertex]

It is broken on Angular CLI 6.1.0. I receive message like:

Schema validation failed with the following errors:
  Data path ".styles[1]" should NOT have additional properties(output).
  Data path ".styles[1]" should be string.
  Data path ".styles[1]" should match exactly one schema in oneOf.

CLI 6.1.0 not support complex value in "styles" only array of string.

[clydin]

@hughanderson4 It supports the longhand form. From reviewing the schema, output should be bundleName though.