How Do I Convert My Angular-CLI Project from CSS to SCSS?

Converting Angular-CLI Projects from CSS to SCSS

When attempting to use SCSS in an Angular-CLI project, you may encounter an error regarding the non-existence of a styles.css file. This error occurs despite having set the default style extension to SCSS using the ng set defaults.styleExt scss command.

Solution:

To resolve this issue, follow these steps:

For Existing Projects (Angular CLI versions older than 6):

1. Change the default style extension to SCSS:

   • Manually edit the .angular-cli.json file and replace css with scss in the styles array.

   • Alternatively, run the command:

     ng config defaults.styleExt=scss

2. Convert existing CSS files to SCSS:

   • Rename all existing .css files to .scss, including styles.css.

3. Adjust the build configuration:

   • Edit the apps[0].styles property in the .angular-cli.json file and replace the .css extensions with .scss.

4. Update component styles:

   • Change the styleUrls array in your component files to point to the new .scss files.

For Existing Projects (Angular CLI version 6 ):

Use the same steps as above, editing the angular.json file instead of .angular-cli.json. Additionally, if you encounter a "Value cannot be found" error, run the following command:

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

For New Projects:

1. Specify SCSS as the style extension when creating a new project:

   ng new your-project-name --style=scss

2. Set SCSS as the default for all future projects (optional):

   ng config --global defaults.styleExt=scss

By following these steps, you will successfully configure your Angular-CLI project to use SCSS.

The above is the detailed content of How Do I Convert My Angular-CLI Project from CSS to SCSS?. For more information, please follow other related articles on the PHP Chinese website!