Detailed explanation of steps to use scss in Angular project

This time I will bring you a detailed explanation of the steps for using scss in Angular projects. What are the precautions for using scss in Angular projects. Here are practical cases, let’s take a look.

Preface

SCSS is a new syntax introduced by Sass 3. Its syntax is fully compatible with CSS3 and inherits Sass powerful functions. That is, any standard CSS3 stylesheet is a valid SCSS file with the same semantics. In addition, SCSS can also recognize most CSS hacks (some CSS tricks) and browser-specific syntax, such as the ancient IE filter syntax.

Since SCSS is an extension of CSS, all code that works properly in CSS will also work properly in SCSS. In other words, a Sass user only needs to understand how Sass extensions work to fully understand SCSS. Most extensions such as variables, parent references, and directives are identical; the only difference is that SCSS requires semicolons and braces instead of newlines and indentations.

Angular CLI supports a variety of css preprocessing, including:

• ##css

• scss

• less

• sass

##styl (stylus)
The default value is css.

Angular has two ways to specify css preprocessing. Take scss as an example below:

Specify css preprocessing for new projectsUse --style to specify css preprocessing for new angular projects

ng new my-project --style=scss

Existing projects specify css preprocessingFor existing projects, it also supports modifying css preprocessing.

View .angular-cli.json, there is a statement similar to the following in the defaults configuration item:

"defaults": {
 "styleExt": "css",
 "component": {}
}

Use the set instruction to modify styleExt

ng set defaults.styleExt scss

If the project uses scss uniformly, It is recommended to change the css file in the project to scss, and remember to also modify the

reference

of other files to the css file. The reference to styles.css is in .angular-cli.json. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How does axios solve the 302 status code problem

How to operate and disable the vue select component

The above is the detailed content of Detailed explanation of steps to use scss in Angular project. For more information, please follow other related articles on the PHP Chinese website!