最新angular项目搭建+引入scss

1，进入要新建项目的文件夹中，右键打开GIT命令框，输入命令：ng new +项目名称

ng new my-app

2，命令行输入：cd my-app

3，启动项目：ng serve --open   打开如下页面表示启动成功~~

4，引入scss,命令行输入：$ cnpm install node-sass  sass-loader -D

5，angular6以上项目没有angular-cli.json文件。修改angular.json配置：

"projects": {
    "my-app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component":{
			    "styleext":"scss"
			}
      },
      ...
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
        },
      },

6，修改根目录下styles.css为styles.scss，以及app目录下app.component.css为app.component.scss

7，修改app.component.ts中

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

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

8，测试

有上图效果就OK了~