How to Successfully Transition from CSS to SCSS in Angular CLI Projects?

Angular CLI Transition from CSS to SCSS

Angular CLI provides the ability to utilize SCSS stylesheets in your projects. However, if you've encountered the error "no such file or directory" while implementing SCSS, certain steps need to be taken.

Command for Default Style Extension

As mentioned in the documentation, running "ng set defaults.styleExt scss" should set the default style extension to SCSS. However, this command may not always work as expected.

Solution for Existing Projects

1. Change Default Style Extension to SCSS:

   • Edit the .angular-cli.json (Angular 5.x and older) or angular.json (Angular 6 ) file to manually set "defaults.styleExt" to "scss".

2. Rename CSS Files to SCSS:

   • Convert existing ".css" files to ".scss" and update the references in the project.

3. Point CLI to styles.scss:

   • Modify the "styles" array in the angular.json file to point to the new styles.scss files.

4. Update Component References:

   • Adjust the "styleUrls" property in individual component files to reflect the updated SCSS file names.

Setting Default for Future Projects

When creating new projects, you can specify the style extension during project creation:

To set the default style extension for all new projects globally:

The above is the detailed content of How to Successfully Transition from CSS to SCSS in Angular CLI Projects?. For more information, please follow other related articles on the PHP Chinese website!