How to use scss in Angular projects

php中世界最好的语言
Release: 2018-06-09 10:31:23
Original
1441 people have browsed it

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
Copy after login

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": {} }
Copy after login

Use the set instruction to modify styleExt

ng set defaults.styleExt scss
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!