Angular-cli: Changing default styleExt to scss gives me Value cannot be found

[piernik]

I've made new project using [email protected].
I want to change defalt style file to scss but command ng config defaults.styleExt=scss gives me Value cannot be found.

How to change default style extention?

[filipesilva]

Heya, you can see here how to change the default for component generation: https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

[piernik]

When I run that command ng config schematics.@schematics/angular:component.styleext scss I get error

Invalid JSON character: "s" at 0:0.
Error: Invalid JSON character: "s" at 0:0.
    at _readValue (C:\strony\www\infirma\admin\node_modules\@angular-devkit\core\src\json\parser.js:567:19)
    at parseJsonAst (C:\strony\www\infirma\admin\node_modules\@angular-devkit\core\src\json\parser.js:605:17)
    at Object.parseJson (C:\strony\www\infirma\admin\node_modules\@angular-devkit\core\src\json\parser.js:631:12)
    at normalizeValue (C:\strony\www\infirma\admin\node_modules\@angular\cli\commands\config.js:128:19)
    at ConfigCommand.set (C:\strony\www\infirma\admin\node_modules\@angular\cli\commands\config.js:195:23)
    at ConfigCommand.run (C:\strony\www\infirma\admin\node_modules\@angular\cli\commands\config.js:168:18)
    at C:\strony\www\infirma\admin\node_modules\@angular\cli\models\command-runner.js:278:30
    at Generator.next (<anonymous>)
    at fulfilled (C:\strony\www\infirma\admin\node_modules\@angular\cli\models\command-runner.js:4:58)
    at <anonymous>

Edit:

I've created new project and I know that I have to add to angular.json in every project

"schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },

[filipesilva]

Looks like our string processing is broken but we're taking a look at it in https://github.com/angular/angular-cli/pull/10956, sorry for that!

[piernik]

No problem

[n-sikka]

@filipesilva i'm getting that same error when running that command on v6.0.5. The merged PR didnt quite work i guess. Can you confirm?

[robmass]

@n-sikka the merge is in the v6.0.7. I had this problem and with that version it is solved.

[calcerrada]

The same problem with v.6.0.8

[francovp]

I also have this problem with v6.0.8.

[dereklin]

@piernik When you say put

"schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },

in every project, where exactly do you put it? Do you have to put it in all of the projects?

Could you show some context?

[piernik]

You have to add in in every project:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
...
  "projects": {
    "frontend": {
      ...
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss",
        }
      }
}

[sannminwin]

Still having issue with cli 6.0.8
ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve './app.component.css' in '/angular/staff-directory/src/app'
ERROR in ./src/app/regions/header/header.component.ts
Module not found: Error: Can't resolve './header.component.css' in '/angular/staff-directory/src/app/regions/header'
ℹ ｢wdm｣:

[msqaddura]

@sannminwin you need in the component.ts to change the styleUrls to .scss

[pfiterman]

I found the command, in the stackoverflow site: ng config schematics.@schematics/angular:component.styleext scss. This command will automatically add the "schematics" section halfer mentioned to the angular.json file e generate the next components with scss instead of css

[ryanki1]

I found the command, in the stackoverflow site: ng config schematics.@schematics/angular:component.styleext scss. This command will automatically add the "schematics" section halfer mentioned to the angular.json file e generate the next components with scss instead of css

@pfiterman Worked for me with:

Angular CLI: 7.3.6
Node: 8.9.4
OS: darwin x64
Angular: 7.2.9

As you say it adds section concerning change at end of angular.json file, overwriting original entry but only if your json path is not fully specified. If you do:

ng config projects.<projectname>.schematics.@schematics/angular:component.style scss

then original entry is overwritten :-)

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