Detailed explanation of how to support SCSS in Angular

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 line breaks and indentation

When styling components, for styling For modularization, we usually use SCSS and SASS. So how do we make our Angular project support SCSS or SASS? The following two methods will be introduced:

1. Specify when creating a project

2. Modify the current project

1. When creating the project, specify

and run it in the specified directory: ng new myProject –style=scss

Note: used here Angular CLI to create projects.

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:

Change the styleExt value in defaults Set to scss

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

In this way, when we run ng g component myComponent and other commands 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 1:

When adding The default is scss

ng new My_New_Project --style=scss

Method 2:

1. Modify the .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';

Related recommendations:

CSS and Sass (SCSS) development specifications

Implementation of SCSS mobile page mask layer effect and solutions to common problems

Principles that should be followed when writing SCSS code_html/css_WEB-ITnose

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