Nx: scss not working when generating apps

[tommyc38]

I changed the angular-cli.json file to use scss as the file styleExt but its only using css when I generate new apps. It does work when I generate new components though. Is this a bug or by design?

[tommyc38]

Also, given Nx is for enterprise apps shouldn't the default be scss? How many large angular apps do you see companies building using css?

[vsavkin]

Can you provide a repro?

[area73]

To me scss is working ok.

About having scss by default I think it is a good idea.

What I do in my project I add a scss folder inside src and add this option to .angual-cli.json
"stylePreprocessorOptions": {
"includePaths": [
"scss"
]
}

This way I will have all my scss generic files located under that directory and inside /src directory

Besides that what I haven't resolve yet , how to use the scss files that are inside my apps with the libs.

So basically I want to import some scss files (specially settings that have variables) from :
apps
|--myApp
|--src
|--scss

into my libs folder.

I know I can do something like:
@import "../../../../apps/myApp/src/scss/settings";
in every scss file that I have but I think it's not the right aprouch.

In a standard angular project since we only have one src folder we can do this:
@import "~settings";

Which is what I want to achieve , but don't know how to tackle that

[Nxt3]

This is happening for me as well. I have "styleExt": "scss" set in my .angular-cli.json, but everytime I generate an app, it still uses .css.

[wind-walkerz]

I got this issues too, even though i have set the "styleExt": "sass" in my angular-cli.json, the app still generate a .css file. But use ng g app testing --style=sass work fine

[LearnGrowAndShare]

Hi,
I was able to replicate this issue :

Just wanted to know if nx supports the scss\sass in stead of scss.
as even though my default ext is set to scss, using below command
ng set defaults.styleExt scss

still the app generation generates with css
ng generate app mainapp --routing

And also
_create-nx-workspace Web_, does not create with scss

Note: manual converting the extension css to scss, and angular cli update, it seems to be working.

[playground]

Same issue, with defaults.styleExt scss

ng g app my-app
still generates with css.

this works ng g app my-app --style=scss

[ccpony]

Same here. Anyone listening...?

[gkamperis]

Looks like Nx is not using the defaults set for angular schematics.

(Angular v6)
I.e.
ng config schematics.@schematics/angular:component.styleext scss

will set your angular schematics defaults but NOT the nx schematics.

you need to do this:
ng config schematics.@nrwl/schematics:component.styleext scss

then the components get the proper extension.

ideally nx should be looking at the @angular ones and using them.
if not then on migration of a project the values should be copied over and some documentation on this would not hurt either way.

[Nxt3]

@gkamperis How would you provide overrides for @nrwl/application? I wanted to set defaults for that too but I can't figure out the correct path as @nrwl/angular:application and @nrwl/application doesn't work.

Nevermind, it's: ng config schematics.@nrwl/schematics:application

[Alex-Balan]

@Nxt3 I have "cli": {"defaultCollection": "@nrwl/schematics"}.
Works for me: "@nrwl/schematics:component": { "styleext": "scss" }.

If "cli": {"defaultCollection": "@schematics/angular"}
works "@schematics/angular:component": { "styleext": "scss" }.

[ibrahimdolapci]

it works for me
"schematics": { "@nrwl/schematics:component": { "styleext": "scss" } }

[bcabanes]

Hi!
Yes @ibrahimdolapci, you're right.
Let's try to explain a little bit...

Explanation

In the Nx Workspace, all the command executed are intercepted by Nx then passed down to the AngularCLI. The schematics called by the generate command are handled by Nx then by AngularCLI. Meaning that if you want to set a default configuration for a specific schematic, you will need to address it on the Nx context, not the AngularCLI one.

_Notice: Nx is using the same interface for the schematic options as the AngularCLI, make sure to take a look._

Example

Setting the styleext property to scss by default when generating component:
Running the command:

$ ng config schematics.@nrwl/schematics:component.styleext scss

Will update the angular.json of your project like this:

// angular.json
"schematics": {
  "@nrwl/schematics:component": {
    "styleext": "scss"
    // other properties...
  }
},

_Notice: we don't target the original @schematics/angular:component, because we are inside the Nx Workspace._

You will then be able to generate new component with the style extension set to scss by default when running:

ng generate component myComponentName --project=myProjectName

This is now part of the Nx FAQ here.

[virtuoushub]

For those coming here using nx8, and wondering why the above comment/wiki link does not work, try:

// angular.json(nx8)
"schematics": {
  "@nrwl/angular:component": {
    "styleext": "scss"
  }
},

See also: https://github.com/nrwl/nx/issues/1653

[tdekoekkoek]

None of this worked for me. And this is a brand new nx app: "@nrwl/angular": "8.1.2".

ng g c xxx --project yyy still creates a component with .css

[vash72]

Keep not working, my version is "@nrwl/angular": "8.4.6",

in -> angular.json
"@nrwl/workspace:component": {
"style": "scss"
}

the comand ng g c compName don't use scss extension

[brain4711]

For me the solution mentioned here helped:
https://github.com/nrwl/nx/issues/533#issuecomment-516039356