Methods that support SCSS in Angular

Introduction to scss

SCSS is a new syntax introduced by Sass 3. Its syntax is fully compatible with CSS3 and inherits the power 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 tips) and browser-specific syntaxes, such as the ancient IE filter syntax.

Since SCSS is an extension of CSS, all code that works properly in CSS can also work properly in SCSS. That is, for a Sass user, you only need to understand how the Sass extension works to fully understand SCSS. Most extensions, such as variables, parent references, and directives, are consistent; the only difference is that SCSS requires semicolons and curly braces instead of line breaks and indents

When adding styles to components, in order to modularize the styles, we usually use SCSS and SASS. So how can we make our Angular project support SCSS or SASS? The following will be introduced from the following two methods:

1. Specify when creating a project
2. Modify the current project

1. Specify when creating a project

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

Note: Here the Angular CLI is used to create the project.

If you want to specify SASS, just change scss to sass.

2. Modify the current project

There are two main places to modify the file:

Set styleExt value in defaults 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, it will be modified to

 "apps": [
  {
   "root": "src",
   "outDir": "dist",
   "assets": [
    "assets",
    ""
   ],
   "index": "",
   "main": "",
   "polyfills": "",
   "test": "",
   "tsconfig": "",
   "testTsconfig": "",
   "prefix": "app",
   "styles": [
    ""
   ],
   "scripts": [],
   "environmentSource": "environments/",
   "environments": {
    "dev": "environments/",
    "prod": "environments/"
   }
  }
 ],

Note: Don't forget to modify the suffix of the file.

angularcli transforms css project into scss project

Method 1:

When added, it defaults to scss

ng new My_New_Project --style=scss

Method 2:

1. Modify. Configuration file:

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

2. Add new file in the src directory_variables.scss

3. The configuration in the file is as follows:

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

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.