在angular 2中使用Sass

Question

提前感谢！

Answer 1

[如果您使用的是angular cli，请检查本答案末尾的编辑部分]

解释如何在“快速启动种子”（https://angular.io/guide/quickstart）中使用sass（https://angular.io/guide/setup#download）

请按照以下简单步骤操作：

npm install
npm start

使用下面提到的命令安装

npm i node-sass -S
npm i sass-loader -S

现在，您可以看到这两个选项都添加到了“package.json”文件中的“dependencies”中。

步骤3：为Sass代码和Css代码创建2个文件夹

  $font-stack:    Helvetica, sans-serif
  $primary-color: #000

  body
    font: 100% $font-stack
    color: $primary-color

"scripts": {
     "build": "tsc -p src/",
     "build:watch": "tsc -p src/ -w",
     "build:e2e": "tsc -p e2e/",
     "serve": "lite-server -c=bs-config.json",
     "serve:e2e": "lite-server -c=bs-config.e2e.json",
     "prestart": "npm run build",
     "start": "concurrently \"npm run build:watch\" \"npm run serve\" \"npm run watch:sass\"",
     "pree2e": "npm run build:e2e",
     "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
     "preprotractor": "webdriver-manager update",
     "protractor": "protractor protractor.config.js",
     "pretest": "npm run build",
     "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
     "pretest:once": "npm run build",
     "test:once": "karma start karma.conf.js --single-run",
     "lint": "tslint ./src/**/*.ts -t verbose",
     "build:sass": "node-sass sass_folder/ -o css_folder",
     "watch:sass": "npm run build:sass && node-sass sass_folder/ -wo css_folder/"
  }

现在，您可以使用以下命令运行应用程序：

npm start

您将在“CSS_Folder”中看到编译后的css代码，该代码具有相同的文件名“demo.css”。它将如下所示（在本例中）：

body {
  font: 100% Helvetica, sans-serif;
  color: #000; }

现在，如果在。sass文件中做任何更改，它将在脚本监视代码时动态地反映到。css文件中。

对于SASS：

ng new Demo_Project --style=sass

对于SCSS：

ng new Demo_Project --style=scss

要更改现有样式：

ng set defaults.styleExt scss