ng new with --style=sass generates angular.json incorect infomation

[tieppt]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

Tested on version 7.3.1

Description

When generating a new app and selecting sass from the prompt, scss files are generated as this MR #13552, but the angular.json file tries to reference style for component as sass:

"schematics": {
  "@schematics/angular:component": {
    "style": "sass"
  }
},

🔬 Minimal Reproduction

ng new app
routing -> no
styles -> sass

🔥 Exception or Error

🌍 Your Environment

$ ng version                                                                                      ✔  4017  23:36:56

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.3.1
Node: 10.15.0
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.13.1
@angular-devkit/core         7.3.1
@angular-devkit/schematics   7.3.1
@schematics/angular          7.3.1
@schematics/update           0.13.1
rxjs                         6.3.3
typescript                   3.2.4

Anything else relevant?

Update the following lines:

angular-cli/packages/schematics/angular/application/index.ts

Lines 164 to 189 in 86356a7

	if (options.inlineTemplate === true
	|| options.inlineStyle === true
	|| options.style !== Style.Css) {
	schematics['@schematics/angular:component'] = {};
	if (options.inlineTemplate === true) {
	(schematics['@schematics/angular:component'] as JsonObject).inlineTemplate = true;
	}
	if (options.inlineStyle === true) {
	(schematics['@schematics/angular:component'] as JsonObject).inlineStyle = true;
	}
	if (options.style && options.style !== Style.Css) {
	(schematics['@schematics/angular:component'] as JsonObject).style = options.style;
	}
	}
	if (options.skipTests === true) {
	['class', 'component', 'directive', 'guard', 'module', 'pipe', 'service'].forEach((type) => {
	if (!(`@schematics/angular:${type}` in schematics)) {
	schematics[`@schematics/angular:${type}`] = {};
	}
	(schematics[`@schematics/angular:${type}`] as JsonObject).skipTests = true;
	});
	}
	const styleExt = styleToFileExtention(options.style);

to:

  const styleExt = styleToFileExtention(options.style);
  if (options.inlineTemplate === true
    || options.inlineStyle === true
    || options.style !== Style.Css) {
    schematics['@schematics/angular:component'] = {};
    if (options.inlineTemplate === true) {
      (schematics['@schematics/angular:component'] as JsonObject).inlineTemplate = true;
    }
    if (options.inlineStyle === true) {
      (schematics['@schematics/angular:component'] as JsonObject).inlineStyle = true;
    }
    if (options.style && options.style !== Style.Css) {
      (schematics['@schematics/angular:component'] as JsonObject).style = styleExt;
    }
  }

  if (options.skipTests === true) {
    ['class', 'component', 'directive', 'guard', 'module', 'pipe', 'service'].forEach((type) => {
      if (!(`@schematics/angular:${type}` in schematics)) {
        schematics[`@schematics/angular:${type}`] = {};
      }
      (schematics[`@schematics/angular:${type}`] as JsonObject).skipTests = true;
    });
  }

[alan-agius4]

I'm sorry, but we don't understand the problem you are reporting.

The sass extension was dropped in favor of scss. Kindly see this PR #13444

[tieppt]

@alan-agius4 sorry my bad. I known we do not support .sass any more. But when we create new app and sass is selected from interactive mode, the CLI still put sass as default component style preprocessor. As expected, it should generate as following:

this code is not correct:

if (options.style && options.style !== Style.Css) { 
  (schematics['@schematics/angular:component'] as JsonObject).style = options.style; 
}

[alan-agius4]

Style can be both the extension of the preprocessor name. As a mater of fact we lean in favor towards the later.

So style should be sass and not scss, as the later is an extension and not a preprocessor.

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