在Angular 2中使用Sass

Question

我正在尝试在我的Angular 2项目中设置Sass。基本上，我了解到有两种方法来创建一个angular 2项目：

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

我参考了https://dev59.com/WFoV5IYBdhLWcg3wc-no#41541042中提到的答案，并且成功地在angular 2项目中使用了scss文件，一切都很好，但我无法在项目文件夹中找到生成的css文件。有人可以解释一下为什么没有生成css文件，但它仍然可以工作吗？

2）使用quickstart seed (https://angular.io/guide/quickstart)

我找不到任何关于如何在快速启动项目中设置sass的信息。有人知道如何在由angular提供的快速启动项目中使用sass吗？

提前感谢！

- Abhishek V

---

angular-cli 使用 webpack，直到生产构建时才会创建 CSS 文件，具体取决于配置可能会生成一些。对于 quickstart，只需在 npm 的 start 命令中添加 node-sass 调用即可自动工作。 - smnbbrv

@smnbbrv 感谢您的解释。现在清楚了在angular-cli中使用sass。但是对于quickstart，在npm start命令中添加node-sass调用似乎无法工作。scss样式没有应用。我需要做额外的事情吗？ - Abhishek V

Answer 1

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

解释如何在“快速入门种子”中使用sass(https://angular.io/guide/quickstart) (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”文件的“dependencies”中看到它们都已添加。

第三步：为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”，应如下所示：

"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”中即可。

[编辑] 如果要使用 Angular CLI：

在创建新的 Angular 项目时，请使用以下命令：

对于 sass：

ng new Demo_Project --style=sass

对于 SCSS：

ng new Demo_Project --style=scss

更改现有样式：

ng set defaults.styleExt scss

在此之后，您可以正常使用Cli。

- AmanDeepSharma

---

感谢提供详细步骤。现在我应该将生成的CSS文件链接到CSS文件夹中的HTML文件中，对吗？我的意思是这样 - <link rel="stylesheet" href="css_folder/styles.css">？ - Abhishek V

在.ts组件文件的@ Component中，您可以将路径添加到'styleUrls'中，而不是链接到html文件。 - AmanDeepSharma

最好知道如何使用Angular CLI的默认serve命令ng serve运行它，而不是使用npm start。 - Danny Bullis

@DannyBullis 我已经编辑了答案，请查看答案末尾，以防您正在使用angular cli。 - AmanDeepSharma

如果您将“npm run watch:sass”添加到start脚本中，它就可以正常工作。 - JHolub

Answer 2

我可以为您解释第一个。

如果你使用的是 `ng server`，编译后的文件将保存在项目中的一个隐藏文件夹中。

如果你使用的是 `ng build`，则可以在 `/dist` 文件夹中看到编译后的文件。在该文件夹中，你可以在 `styles.[hashversion].css` 文件中找到通用样式，但本地组件样式会被包含在由 Webpack 生成的 `main.[hashversion].js` 文件中。

Angular-cli 使用 Webpack，如果你想了解更多，请参阅 Webpack Docs。

更新：

在第二种情况下，你需要手动编译 sass。在 app 文件夹中，有一个 app.component.ts 文件，它将由 Typescript 编译器编译到同一文件夹中的 app.component.js 中。因此，你需要对 sass 执行相同的操作。并将 CSS 文件导入组件中。

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
  stylesUrl: ['app/app.component.css']
})
export class AppComponent  { name = 'Angular'; }

注意到你不能使用相对路径，因为所有内容都将从根目录请求。

创建一个app.component.sass并将样式放在其中。

然后执行Sass编译器，将app.component.sass编译为app.component.css 运行服务器，它就能工作了。

- Serginho

---

谢谢解释。第一个疑问现在已经清除了。你有关于快速启动种子中的Sass的任何想法吗？ - Abhishek V

Answer 3

这里有两种主要情况。

1. 创建新的Angular CLI项目时，使用CLI命令

   ng new my-angular-app --style=scss

2. 当已经设置好Angular CLI项目时，使用CLI命令

   ng set default.styleExt scss

在第二种情况下，您需要手动转换现有的.css文件。您也可以使用sass或less代替scss。

查看完整文章请点击这里。

在Angular CLI项目中使用SCSS/SASS/LESS

- Jayesh Panchal