在角度 2 中使用 Sass

Question

我正在尝试在我的 Angular 2 项目中设置 Sass 。基本上据我所知，有两种方法可以创建 Angular 2 项目

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

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

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

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

提前致谢！

原文由 Abhishek V 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

第 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”中的 Build 和 Watch 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”中看到具有相同文件名“demo.css”的编译后的css代码。它看起来像这样（在这种情况下）：

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

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

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

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

[已编辑] 如果您想使用 Angular CLI：

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

对于萨斯：

 ng new Demo_Project --style=sass

对于scss：

 ng new Demo_Project --style=scss

要更改现有样式：

 ng set defaults.styleExt scss

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

原文由 AmanDeepSharma 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 发布，翻译遵循 CC BY-SA 3.0 许可协议