Faster, Higher, Stronger
更快,更高,更强

Enable SASS in Angular4

If you use angular-cli to create an Angular4 project. The project will use css by default. If you want to use sass, you can do things like this:

In angular-cli.json: Revise apps.styles to be [“styles.scss”], and defaults.styleExt to be “scss”. This will enable you to generate .scss file instead of .css file when using command like “ng generate component componentName”.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "human"
  },
  "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"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

Rename styles.css in src to be styles.scss. If your command line tool present some error, just restart your local server, and everything will be okay again.

Rename app.component.css in src/app to app.component.scss, and make corresponding revision in app.component.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

If you have created other components, do the same revision as above.

Last but not the least, there is no need for you to install sass by your self, it seems that angular will do the work.

赞(0) 打赏
未经允许不得转载:峰间的云 » Enable SASS in Angular4

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏