How to support SCSS in Angular-JS Tutorial-php.cn

How to support SCSS in Angular

php中世界最好的语言

Release： 2018-04-14 15:01:45

Original

1430 people have browsed it

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:

Specify when creating a 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": {}
 }

Copy after login

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"
   }
  }
 ],

Copy after login

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

Copy after login

Method Two:

1. Modify .angular-cli.json

Configuration file:

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

Copy after login

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';

Copy after login

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!