How to Fix 'no such file or directory' Errors When Migrating Angular-CLI from CSS to SCSS?

Error Troubleshooting: Converting Angular-CLI from CSS to SCSS

When transitioning an Angular-CLI project from traditional CSS styles to SCSS, you may encounter an error stating "no such file or directory, open '/Users/Egen/Code/angular/src/styles.css'".

For Angular 6 and Above:

• As per the official documentation, use the following command:

ng config defaults.styleExt=scss

For Angular 5.x and Older:

• If you receive an error message regarding "Value cannot be found," execute the following command:

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

Additional Steps:

1. Rename CSS Files: Convert existing .css files to .scss (e.g., styles.css to styles.scss).
2. Adjust CLI: Configure the CLI to recognize styles.scss by manually editing angular.json (for Angular 6 ) or .angular-cli.json (for Angular 5.x).
3. Modify Component Styles: Update the styleUrls property in components to match the new SCSS file names.

For New Projects:

• When creating a new project, specify the style type:

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

• Globally set the default style extension:

ng config --global defaults.styleExt=scss

By implementing these steps, you should be able to successfully convert your Angular-CLI project from CSS to SCSS.

The above is the detailed content of How to Fix 'no such file or directory' Errors When Migrating Angular-CLI from CSS to SCSS?. For more information, please follow other related articles on the PHP Chinese website!