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

Home

Web Front-end

CSS Tutorial

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

DDD

Dec 11, 2024 am 09:33 AM

How to Fix the

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

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.
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.
Update Angular.json (Only for Angular 6 ):
- Modify the file extensions in apps[0].styles in angular.json.
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

Set Style Extension During Project Creation:
- When creating a new project using ng new, specify --style=scss.
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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

CSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AM

Choosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.

How to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AM

The best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.

Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

See all articles