Motf Creations
Published in

Motf Creations

Migrate from CSS to SCSS stylesheets for an existing Angular application

  • Using an Angular schematics NPM package to perform the migration with just one command.
  • The manual way of performing the migration i.e. using the ng cli command.
  • Using the NPM package renamer to perform the migration
ng new my-scss-app --style=scss

Using the NPM package schematics-scss-migrate.

ng g schematics-scss-migrate:scss-migrate
  • Renamed all the stylesheets in the src folder recursively.
  • Altered the styleUrls value to point to the new file names for the stylesheet in the component classes relative to the component style files.
  • Updated the component styles schematics value in the angular.json file or creates one if the schematic does not exist.
  • And renamed styles.css references to .scss in the angular.json file

The manual migration method using the ng CLI

ng config schematics.@schematics/angular:component.style scss
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
...
}
{
"projects": {
"your-project-name": {
...
"architect": {
"build": {
"options": {
"styles": [
"src/styles.css" // update
...
]
...
}
...
},
"test": {
...
"options": {
...
"styles": [
"src/styles.css" // update
],
}
},
}
}
}
}

Changing the project’s stylesheet files from .css to .scss file extensions using the renamer NPM package.

npm i -g renamer

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store