How to use scss in Angular projects

This time I will show you how to use scss in Angular projects, and what are the precautions for using scss in Angular projects. The following is a practical case, let's take a look.

Preface

SCSS is a new syntax introduced by Sass 3. Its syntax is fully compatible with CSS3 and inherits the powerful functions of Sass. 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 the same; the only difference is that SCSS requires semicolons and braces instead of newlines and indentation.

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 references to the css file in other files. 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:

Use node swig to render

##Use JS to operate the image, leaving only black and white

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