在 Angular 2 中使用 Sass

我正在尝试设置Sass in my Angular 2项目。基本上据我了解，有两种方法可以创建 Angular 2 项目

1）使用angular-cli (https://github.com/angular/angular-cli https://github.com/angular/angular-cli)

我参考了中提到的答案https://stackoverflow.com/a/41541042/2868352 https://stackoverflow.com/a/41541042/2868352&我可以成功使用scssAngular 2 项目中的文件，一切都很好，但我无法找到生成的css文件来自scss文件在项目文件夹中。谁能解释一下为什么没有的原因css文件已生成但仍然有效？

2) Using quickstart seed (https://angular.io/guide/quickstart https://angular.io/guide/quickstart)

我无法获得有关如何设置的任何信息sass在快速启动项目中。有谁知道如何使用sass在 Angular 提供的快速启动项目中？

提前致谢！

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

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

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

第 1 步：设置快速启动种子

使用以下命令进行设置

npm install
npm start

您将在浏览器上看到“Hello Angular”。

第2步：安装node-sass和sass-loader

使用下面提到的命令来安装

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

现在您可以看到这两个内容都添加到“package.json”文件内的“依赖项”中。

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

在“quickstart-master”文件夹中创建两个任意名称的文件夹。在这种情况下例如： “sass_folder”和“css_folder”。现在创建一个演示文件“demo.sass”并将其放入“sass_folder”中。您可以在此 .sass 文件中放置简单的 sass 代码。它看起来像这样：

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

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

第 4 步：在“package.json”文件中进行更改

将脚本添加到构建并观察“sass_folder”中存在的 Sass 代码。编译后，生成的CSS代码应存储在“css_folder”中。更改后，“package.json”文件中的“脚本”应如下所示：

"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/"
  }

仅查看“start”、“build:sass”和“watch:sass”。

第 5 步：运行应用程序

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

npm start

您将在“css_folder”中看到编译后的 css 代码，其文件名为“demo.css”。它看起来像这样（在本例中）：

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

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

如果显示错误，请在 .sass 文件中进行任何更改时关闭 .css 文件。

注意：对于 scss 代码，您可以遵循相同的步骤。在这种情况下，您只需将 .scss 文件放入“sass_folder”中即可。

[edited] 如果您想使用 Angular CLI：

在创建新的 Angular 项目时，使用下面提到的命令：

对于萨斯：

ng new Demo_Project --style=sass

对于scss：

ng new Demo_Project --style=scss

要更改现有样式：

ng set defaults.styleExt scss

之后就可以正常使用Cli了。