How to Migrate from CSS to SCSS in Angular CLI?

Angular CLI: Converting from CSS to SCSS

When transitioning an Angular project from CSS to SCSS, you may encounter an error stating:

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'

For Existing Projects (Angular 6)

1. Update the default style extension to "scss":

   • Manually edit .angular-cli.json or angular.json (Angular 6 ):

     {
     "defaults": {
       "styleExt": "scss"
     }
     }

     Copy after login

   • Or run:

     ng config defaults.styleExt=scss

     Copy after login
2. Rename existing .css files to .scss.
3. Update apps[0].styles in angular.json to include the .scss extensions.
4. Update component styleUrls to reflect the new file names.

For Future Projects

1. Create a new project using:

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

   Copy after login

2. Set the global default style extension:

   ng config --global defaults.styleExt=scss

   Copy after login

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