CODEWITHSUNDEEP
angularangular-cli
sdsd
sdsd

Reputation: 517

How can i change already generated angular app with css stylesheet - to use scss

I have generated angular app to use css - which is default one. After that i see that the project will grow in the future and i wanted to use next components with scss stylesheet.

I edited that in my angular.json file

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

previous was - "styleext": "css"

i restarded the server, i tried to generate new component with

ng g c some-new-compo

but now angular cli generated again the component with css stylesheet instead with scss

I am using angular 10 version.

How this needs to be done ?

Upvotes: 1

Views: 2458

Answers (2)

Msk Satheesh
Msk Satheesh

Reputation: 1536

Use the following command to change angular config

ng config schematics.@schematics/angular:component.style scss

and open angular.json file

Change your

"schematics": {}

to

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

change from (at two places)

"styles": [
    "src/styles.css"
 ],

to

"styles": [
    "src/styles.scss"
 ],

Then change manually all you component .css to .scss and change in the .ts files as follows in config

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
})

and then create a component it will create .scss file as you expected

Upvotes: 4

sdsd
sdsd

Reputation: 517

I found the mistake. Foe angular version 9+ it needs to be: style insteadm styleext

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

Upvotes: 1

Related Questions