Angular-cli: Generate(component): Does not default to SCSS when specified in `.angular-cli.json`

[timdoes]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.4.0
node: 8.4.0
os: darwin x64
@angular/animations: 4.4.0-RC.0
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.4.0-RC.0
@angular/compiler: 4.4.0-RC.0
@angular/core: 4.4.0-RC.0
@angular/flex-layout: 2.0.0-beta.9
@angular/forms: 4.4.0-RC.0
@angular/http: 4.4.0-RC.0
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.4.0-RC.0
@angular/platform-browser-dynamic: 4.4.0-RC.0
@angular/router: 4.4.0-RC.0
@angular/cli: 1.4.0
@angular/compiler-cli: 4.4.0-RC.0
@angular/language-service: 4.4.0-RC.0
@angular/service-worker: 1.0.0-beta.16
typescript: 2.5.2

Repro steps.

Run ng g c foo

The log given by the failure.

No failure

Desired functionality.

Result: foo.component.css
Expected Result: foo.component.scss

Mention any other details that might be useful.

.angular-cli.json Example:

"defaults": {
  "styleExt": "scss",
},

[tieppt]

I face same problem

[lubkoKuzenko]

You can use flag ng g c foo --style=scss

[frizar]

You can use flag ng g c foo --style=scss

But why is not documented?
https://github.com/angular/angular-cli/blob/master/docs/documentation/generate/component.md
And why styleExt: scss doesn't work?

[timdoes]

I also just noticed that my specified default "prefix" is not working either.

@lubkoKuzenko You are correct, the individual flags still work but this bug report is for the .angular-cli.json file defaults not working.

[rafaelss95]

I just faced the same problem. It was working with 1.3.2.

It should supposed to be fixed in #7430, but the problem persists.

[zackarychapple]

Experiencing this with 1.4.1 as well.

[bjornharvold]

Seeing this with 1.4.1 as well. Cheers.

[timdoes]

I see that the app prefix is now being generated in v1.4.2 via bc58afe #7522 but the styleExt default is still not working.

[marekdon]

Same problem with 1.4.2

[garysui]

I have the same problem with 6.0.0-rc.3

[SvenBudak]

Same problem with 6.0.3

[LuizAsFight]

Same problem with 6.0.2

[Reboog711]

Same problem with 6.0.1 .

My solution was to use the styleext command line argument when generating a component:

ng generate component dir/component-name --project=my-project --styleext=scss

A bunch of other links said to use a style command argument, but that didn't work for me, I assume because the argument changed when it finally got documented, or as part of the move from .angular-cli.json to angular.json.

[AhmedYousseff]

"schematics": {
"@schematics/angular:component": {
"spec": false,
"styleext": "scss"
},
instead of
"schematics": {
"@schematics/angular:component": {
"spec": false,
"styleExt": "scss"
}

[DmitriyIvanko]

Maybe I'm wrong. But I do not understand why this bug is closed. It definitely does not work in the latest version (Angular CLI 6.0.3).

[Erdma152]

Agreed, I am having the same issue with Angular 6.

[dc-m]

I'm also having this issue:
node: 10.8.0
npm: 6.2.0
angular: 6.0.2
angular/[email protected]

[Jrb1x]

Also having this issue on Angular 6. ng g c test-component --style=scss also doesn't work.

[Reboog711]

@Jrb1x Use --styleext=scss instead of --style=scss,

[WizardPC]

Same issue on a totally new project.

I use "ng new my-app --style=scss" and it's works (generate styles.scss for exemple), but "ng g c my-component" generate an .css

[DmitriyIvanko]

When I use this one: http://prntscr.com/lt11a8 (I use ngrx also)
Problem has been solved

[hhmultimediallc]

I would really love to see the ng generate respect:

"schematics": {
":component": {
"styleext": "scss"
}

Seems like a simple feature to implement and one that would be consistent with user expectations for a product of this quality.

[ming0627]

In angular.json, set "schematics" as below to default scss when generate new component

"schematics": { "@schematics/angular:component": { "style": "scss" } }

[martinfletcher]

@ming0627 I have this already in my angular.json (CLI Version: 7.3.8), and it is being ignored...

UPDATE: It looks like its not respecting the schematic when you do not specify the project

My workspace has 2 projects, 'my-app' and 'my-lib'

Running 'ng g c my-component' generates with default css file extension

Running 'ng g c my-component --project=my-app' generates with the schematic set scss file extension

[frizar]

Still not fixed in 2019, LMAO...
Thanks to Evan we have Vue, and I forgot this Angular nightmare.

[rynop]

Working fine for me on v7.3.8. If you run ng new test1 --style=scss you'll notice ng g component blah creates with .scss.

Here is the minimum angular.json I found that works:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myproj": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      }
    }
  },
  "defaultProject": "myproj"
}

[vijayakumar-psg587]

@rynop Thank you so much . The change in the "schematics" in angular.json makes the angular-cli adhere to the rule atleast in angular 8

[angular-automatic-lock-bot[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._}