ng new with --style=sccs fails to do @import from styles.sccs

[sboden]

Bug Report or Feature Request (mark with an x)

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

Command (mark with an x)

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

Versions

Angular CLI: 7.2.2
Node: 10.12.0
OS: win32 x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version
@angular-devkit/architect 0.12.2
@angular-devkit/build-angular 0.12.2
@angular-devkit/build-optimizer 0.12.2
@angular-devkit/build-webpack 0.12.2
@angular-devkit/core 7.2.2
@angular-devkit/schematics 7.2.2
@angular/cli 7.2.2
@ngtools/webpack 7.2.2
@schematics/angular 7.2.2
@schematics/update 0.12.2
rxjs 6.3.3
typescript 3.2.2
webpack 4.28.4

Repro steps

Very simple to reproduce:

1. Install angular-cli

npm install @angular/cli

2. Make a new project with "sccs" style option:

ng new testproject --prefix=tp --style=sccs

3. Project compiles without problems when you do the following:

cd testproject
ng serve

4. Create a new file "src/styles-variables.sccs" containing following (but contents doesn't really matter):

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

5. Add following line to the end of "src/styles.sccs" (a stub file being generated by the cli) to import the previous file:

@import "styles-variables";

6. Run "ng serve" again

cd testproject
ng serve

And now it fails

The log given by the failure

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2019-01-17T06:05:11.930Z
Hash: 986836d7e5ddab8b20ee
Time: 10216ms
chunk {main} main.js, main.js.map (main) 11.3 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 909 bytes [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.74 MB [initial] [rendered]

ERROR in ./src/styles.sccs 3:0
Module parse failed: Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type.
| /* You can add global styles to this file, and also import other style files */
|
> @import "styles-variables";
|
i ｢wdm｣: Failed to compile.

Desired functionality

To be able to import files from the styles.sccs file when using "--style=sccs"

Mention any other details that might be useful

[alan-agius4]

sccs is not a valid extension it should be scss.

[alan-agius4]

Also relates to #13149

[sboden]

Verified, it has to be "scss" and not "sccs" in the commandline.

As improvement can I suggest a check on the possible values of "--style" on the command line, aborting with a nice error message when something unexpected is passed.

[alan-agius4]

I totally agree.

[alan-agius4]

Closing this in favor of #13149 since it's the same cause and fix.

[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.}