Скачать или смотреть Resolving Angular's Component Generation Issue with SCSS Styles

Learn how to configure Angular to generate new components using `SCSS` instead of `CSS` with clear directives and practical tips.
---
This video is based on the question https://stackoverflow.com/q/62778523/ asked by the user 'Solomon Arnett' ( https://stackoverflow.com/u/3623716/ ) and on the answer https://stackoverflow.com/a/62778700/ provided by the user 'Poul Kruijt' ( https://stackoverflow.com/u/3106920/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Angular refuses to generate new components using scss

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Resolving Angular's Component Generation Issue with SCSS Styles

If you're an Angular developer transitioning from using CSS to SCSS (Sassy CSS) for styling your components, you might have run into a frustrating issue. It's common for Angular to continue generating new components with the default CSS styles even after you've switched to SCSS. This can be a hassle, especially when you expect your project to recognize and compile SCSS files seamlessly.

In this guide, we will walk you through the steps to ensure that new components are created with SCSS, allowing you to take full advantage of this powerful styling language.

The Problem

When you create new components in Angular, the framework uses a default styling format, which, in many cases, is CSS. If your Angular project was initially set up to use CSS, it will not automatically switch to SCSS despite making changes in your configuration files.

This issue occurred in a project using Angular CLI version 9.1.3 and Node version 12.16.2, where the user had updated the existing styles from styles.css to styles.scss but found that newly generated components continued to use .css files.

Step-by-Step Solution

To resolve this issue, follow these organized steps:

1. Update the angular.json File

The first and most crucial step is making sure your project configuration in angular.json is set up correctly:

Open your angular.json file.

Locate the section where your project is defined. It should look something like this:

[[See Video to Reveal this Text or Code Snippet]]

Within your project’s configuration, find or add the schematics section as follows:

[[See Video to Reveal this Text or Code Snippet]]

The entire snippet should look similar to this:

[[See Video to Reveal this Text or Code Snippet]]

2. Verify Angular CLI Version

It's also important to ensure you're using the appropriate version of Angular CLI. An outdated global installation can sometimes lead to inconsistencies. To create a fresh installation, run the following command in your terminal:

[[See Video to Reveal this Text or Code Snippet]]

3. Create a New Component

Once you’ve updated the angular.json file and verified the CLI version, you can now attempt to generate a new component. Use the Angular CLI command:

[[See Video to Reveal this Text or Code Snippet]]

Verify that the new component files are created with the expected .scss extension rather than .css.

Conclusion

Transitioning from CSS to SCSS doesn't need to be a frustrating experience. By following the steps outlined above—primarily focusing on the correct configuration in angular.json and ensuring your CLI version is current—you enable Angular to generate new components with SCSS styling right out of the box.

With SCSS, you can leverage features like variables, nested rules, and mixins, making your stylesheets cleaner and more maintainable. If you still encounter issues, consider reviewing your project setup or exploring other resources for additional insight. Happy coding!