Let's talk about how to modify .css files to .scss files in Angular projects

Let’s talk about this articleAngular After initializing the project, how to change the default .css file to a .scss file? Introduce the processing method. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

[Related tutorial recommendation: "angular tutorial"]

Question: The picture below is the project after initialization. The style file in the project is a .css file. What should I do if I want to change .css to .scss?

Solution: Execute the following command:

find . -name "*.css" -exec bash -c 'mv "$1" "${1%.css}".scss' - '{}' \;

Then you will see an error in the console, because the place where the .css file was previously referenced now becomes .scss file, you need to modify the reference.

There are two modifications:

1 is the business component

2 is the project configuration file.

Business component means changing the original reference to .css with the suffix to .scss. Example:

project configuration information, that is, modify it in angular.json as follows:

After this modification, it will Solve some console error reports. If there are still errors:

If you encounter this kind of error, stop the project and re-run the project:

This completes the transformation from .css to .scss in the current project.

One thing to note is: This is a project that has just been created, and it is still in the stage before a large number of third-party libraries are introduced. If a large number of third-party libraries have been introduced, such as font libraries and other libraries that may be related to styles, this method may have certain limitations and may require further modifications. Please refer to the reference articles cited in this article.

Reference: https://lanxuexing.github.io/2019/09/26/ng-scss-migrate/

Summary: This is the same as the routing file declared later yesterday. In fact, You can write all these things when initializing the project.

• One is: when initializing the project, create a routing file
• The other is: when initializing the project, set the format of the style file to be used in the project, which is .css Or .scss.

This article is reproduced from: https://juejin.cn/post/6934947164162359304

For more programming-related knowledge, please visit:Introduction to Programming ! !

The above is the detailed content of Let's talk about how to modify .css files to .scss files in Angular projects. For more information, please follow other related articles on the PHP Chinese website!