How to Fix the 'styles.bundle.js:33 Uncaught Error' in Angular-CLI When Using SCSS?

Troubleshooting "styles.bundle.js:33Uncaught Error" Error When Using Angular-CLI with SCSS

You have encountered an issue where Angular-CLI throws the error "styles.bundle.js:33Uncaught Error" when using SCSS. While the documentation states that running ng set defaults.styleExt scss should resolve this, it's not working for you. Let's explore the reasons behind this and provide a comprehensive solution.

Cause of the Error

The error occurs because the CLI is still attempting to find and bundle CSS files for styling. Angular-CLI initially starts with CSS as the default style extension. When you attempt to use SCSS, the CLI must be configured to recognize and process SCSS files.

Solution for Existing Projects

1. Update Default Style Extension:

   • In Angular 5.x and earlier, modify the .angular-cli.json file.
   • In Angular 6 , change the angular.json file.
   • Alternatively, run ng config defaults.styleExt=scss. If that results in an error, use ng config schematics.@schematics/angular:component.styleext scss.

2. Rename CSS Files to SCSS:

   • Change styles.css and component CSS files (e.g., app/app.component.css) to styles.scss and corresponding component SCSS files.

3. Update Angular.json (Only for Angular 6 ):

   • Modify the file extensions in apps[0].styles in angular.json.

4. Point Components to New Style Files:

   • Change the styleUrls properties in the component definitions to match the new SCSS file names.

Solution for Future Projects

1. Set Style Extension During Project Creation:

   • When creating a new project using ng new, specify --style=scss.

2. Set Global Default:

   • If you prefer to have SCSS as the default style extension for all future projects, run:

   ng config --global defaults.styleExt=scss

The above is the detailed content of How to Fix the 'styles.bundle.js:33 Uncaught Error' in Angular-CLI When Using SCSS?. For more information, please follow other related articles on the PHP Chinese website!