Can't use styles input/output in CLI 6+

[FirstVertex]

Bug Report or Feature Request (mark with an x)

- [x  ] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [x  ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

node --version 8.11.2
npm --version 6.1.0
Angular CLI: 6.1.1
Node: 8.11.2
OS: win32 x64
Angular: 6.1.0

Repro steps

In angular.json under projects > Client > architect > build I have this styles config with input and output:

            "styles": [
              {
                "input": "../Content/_vendor.scss",
                "output": "vendor"
              },
              {
                "input": "../Content/_site.scss",
                "output": "site"
              },
              "src/styles.scss"
            ],

Under Angular < 6 this worked fine. But it seems the input/output feature is not a part of Angular 6?

The log given by the failure

I get an error like this when I try ng build:

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

Desired functionality

The use case is we want to have a vendor.css file for 3rd party css and a separate site.css for in-house css. These need to be 2 separate files, and generated as 2 separate <link> tags in the index.html, instead of being bundled together in one.

Please port over from Angular 5, the input/output properties and functionality of styles section, so that we may generate multiple css outputs.

Mention any other details that might be useful

You can see use of input/output documented here:
#6899
#8831

[filipesilva]

Hi, the option names in Angular CLI 6 have changed and are documented in https://github.com/angular/angular-cli/wiki/stories-global-styles. Instead of output, you should use bundleName now.

[rajuadaki]

I'm facing same issue..
I'm trying to output component's style, I have added below code in angular.json
"styles": [ "node_modules/font-awesome/css/font-awesome.min.css", "node_modules/mdi/css/materialdesignicons.min.css", "src/styles.scss", { "input": "src/app/edit.component.scss", "bundleName": "editstyle", "lazy": true }
I'm getting below error

Uncaught Error: Expected 'styles' to be an array of strings.
at assertArrayOfStrings (compiler.js:2176)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:10368)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.js:10291)
at compiler.js:23865
at Array.forEach ()
at compiler.js:23864
at Array.forEach ()
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:23861)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23839)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:23799)

Let me know how to fix this issue, thanks in advance

[Jun711]

@filipesilva

does this still apply for Angular CLI 7.

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

This documentation is deprecated but the redirected url doesn't contain information regarding this.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}