To achieve this in ng6, you can simply insert the provided code into the angular.json file located at the root directory:

If you want to make manual changes in .angular.json, use the following snippet:

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

Access the angular.json document.

1. Modify the following:

"schematics": {}

to

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

2. Make adjustments in two locations:

"src/styles.css"

to

"src/styles.scss"

then review and retitle all .css documents and revise component.ts files styleUrls from .css to .scss

If you are using the latest version of Angular (v9), make sure to include the following code snippet in your angular.json file:

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

To add this configuration, simply run the command below:

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

To begin, add the following to your project:

npm i --save-dev schematics-scss-migrate

If you are using an Angular CLI project:

execute the command below:

ng g schematics-scss-migrate:scss-migrate

This command will perform the following tasks within your project:

1. Change the names of all stylesheets in the src folder recursively.
2. Modify the styleUrls in corresponding component classes to reference the new stylesheet filenames.
3. Update the component styles schematics value in the angular.json file or create one if it doesn't already exist.
4. Replace all references to styles.css with styles.scss in the angular.json file.

I personally tested this on my angular 9 project and was successful...it eliminates the need for manual renaming of files. 😎 Simply input the command and BAM!!! your project is now migrated to a scss project.

for more information: https://www.npmjs.com/package/schematics-scss-migrate

Steps for transitioning existing projects:

In the angular.json file:

1. Within the build section and the test section, make the following changes:

   Replace "styles": ["src/styles.css"] with "styles": ["src/styles.scss"]

2. Replace "schematics": {} with

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

The command

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

can be used, but it doesn't update the configuration in the same location.

In your project, rename your .css files to .scss

For new projects, use the following command to set up everything:

ng n project-name --style=scss

Regarding global settings

Newer versions may not have a global command for this specific configuration change.

When working with Angular 6,

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

It's important to remember that @schematics/angular is the default schematic for the Angular CLI.

Angular CLI Integration with CSS Preprocessors: Version 6.0.3

If you are starting a new project, you have the option to choose the file extension for your style files:

ng new sassy-project --style=sass

You can also change the default style setting for an existing project:

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

For more information on integrating major CSS preprocessors with Angular CLI, refer to the Angular CLI Documentation.

An efficient method for transitioning your files is through the use of the schematic NPM tool called schematics-scss-migrate. This tool simplifies the process by converting all CSS files to SCSS files:

ng add schematics-scss-migrate

Check out https://github.com/Teebo/scss-migrate#readme for more details.

To make this modification in "angular.json", you will need to manually adjust the following code located at the end of the file.

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

Please ensure that all files are renamed from .css to .scss and update all references accordingly.

To change the default style extension to SCSS, you can use the following command:

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

There are multiple approaches to achieve this task, however, I encountered a new schematics value in the recent angular versions that needed to be preserved. The command

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

failed due to this additional value, so I manually updated the new value in angular.json. Here is the revised value that needs to be inserted:

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

The final version of angular.json will look like this:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  ...
  "projects": {
    "yourapp": {
      ...
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        },
        "@schematics/angular:component": {
          "style": "scss"
        }
...

Lastly, you will need to

• rename all the css files to scss and
• update all references in your files accordingly.

Following these steps should complete the process successfully.

A forceful adjustment can be implemented. Although it may take some time, this method will be effective for making changes.

Navigate to the application directory src/app

1. Access the following file: app.component.ts

2. Modify the code

   styleUrls: ['./app.component.css']

   to

   styleUrls: ['./app.component.scss']

3. Save your changes and close the file.

Within the same directory src/app

1. Change the file extension of app.component.css to (app.component.scss)

2. Apply this adjustment to all other components as well (e.g., home, about, contact, etc...)

The configuration file angular.json is up next, located at the root of the project.

1. Find and Replace the css extension with (scss).

2. Save your changes and close the file.

Finally, restart your application using ng serve -o.

If there are any errors during compilation, repeat the steps outlined above.

Be sure to carefully follow the instructions within the app/src directory.

If you're working with ng6, it's essential to utilize the following command as recommended in a related discussion:

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

If you are using the Nrwl extensions and happen to stumble upon this discussion, just know that all commands are handled by Nx before being passed on to AngularCLI (for example:

ng generate component myComponent

).

To enable SCSS in an Nx workspace, use the following command:

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

For Angular 11 and higher versions

To make this change manually, go to angular.json.

Find the line containing "schematics": {},

Replace it with:

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