How to support SCSS in Angular

This time I will show you how to support SCSS in Angular. What are the precautions for supporting SCSS in Angular? The following is a practical case, let's take a look.

scss introduction

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 Style sheets are valid SCSS files with the same semantics. Additionally, SCSS recognizes most CSS hacks (some CSS Tips) and browser-specific syntax, such as the old IE filter syntax.

Since SCSS is an extension of CSS, any code that works in CSS will work in SCSS. That is, for a Sass Users only need to understand how Sass extensions work to fully understand SCSS. Most extensions, such as variables, parent references, and The instructions are all the same; the only difference is that SCSS requires semicolons and braces instead of line breaks and indentation

When adding styles to components, in order to

modularize the styles, we usually use SCSS and SASS. So how do we make our Angular project support SCSS or SASS? The following will be introduced in the following two ways:

1. Specify when creating a project

Modify the current project

1. Specify

when creating the project Run in the specified directory: ng new myProject –style=scss

Note: Angular's CLI is used here to create the project.

If you want to specify SASS, just replace scss with sass.

2. Modify the current project

Modify the angular-cli.json file. There are two main places that need to be modified:

Set the styleExt value in defaults to scss

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

In this way, when we run commands such as ng g component myComponent to generate files, the default suffix is ​​scss

In styles under apps, change styles.css to styles.scss

 "apps": [
  {
   "root": "src",
   "outDir": "dist",
   "assets": [
    "assets",
    "favicon.ico"
   ],
   "index": "index.html",
   "main": "main.ts",
   "polyfills": "polyfills.ts",
   "test": "test.ts",
   "tsconfig": "tsconfig.app.json",
   "testTsconfig": "tsconfig.spec.json",
   "prefix": "app",
   "styles": [
    "styles.scss"
   ],
   "scripts": [],
   "environmentSource": "environments/environment.ts",
   "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
   }
  }
 ],

Note: Don’t forget to modify the suffix of the style.css file.

angularcli Convert css project to scss project

method one:

When adding, it defaults to scss

ng new My_New_Project --style=scss

Method Two:

1. Modify .angular-cli.json

Configuration file:

"defaults": {
   "styleExt": "scss",
}
"styles": [
    "styles.scss"
   ],

2. Add the file _variables.scss

in the src directory 3. The configuration in the style.scss file is as follows:

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

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:

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