Angular CLI SASS 选项

Question

我是 Angular 的新手，我来自 Ember 社区。尝试使用基于 Ember-CLI 的新 Angular-CLI。

我需要知道在新的 Angular 项目中处理 SASS 的最佳方法。我尝试使用 ember-cli-sass 存储库来查看它是否会发挥作用，因为 Angular-CLI 的许多核心组件都运行来自 Ember-CLI 模块。

它没有用，但又不确定我是否只是配置错误。

此外，在新的 Angular 项目中组织样式的最佳方式是什么？最好将 sass 文件与组件放在同一文件夹中。

Answer 1

引用自官方 github 此处的 repo -

To use one just install for example

npm install node-sass

and rename .css files in your project to .scss or .sass. They will be compiled automatically. The Angular2App's options argument has sassCompiler, lessCompiler, stylusCompiler and compassCompiler options that are passed directly to their respective CSS preprocessors.

看这里

https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Answer 2

Angular CLI version 9 (used to create Angular 9 projects) now picks up style from schematics instead of styleext. Use the command like this:
ng config schematics.@schematics/angular:component.style scss
and the resulting angular.json shall look like this
"schematics": {
   "@schematics/angular:component": {
      "style": "scss"
    }
  }

其他可能的解决方案和解释：

要 使用 angular CLI 创建一个新项目并提供 sass 支持，试试这个：

ng new My_New_Project --style=scss

您也可以使用 --style=sass & 如果您不知道其中的区别，请阅读这篇简短易懂的文章 article 如果您仍然不知道，请使用 scss & 继续学习。

如果您有一个 angular 5 项目，请使用此命令更新项目的配置。

ng set defaults.styleExt scss

最新版本

对于 Angular 6 使用 CLI 在现有项目上设置新样式：

ng config schematics.@schematics/angular:component.styleext scss

或直接进入angular.json:

"schematics": {
      "@schematics/angular:component": {
      "styleext": "scss"
    }
}

Answer 3

如 Mertcan 所说，使用 scss 的最佳方法是使用该选项创建项目：

ng new My_New_Project --style=scss

Angular-cli 还添加了一个选项，用于在使用以下命令创建项目后更改默认 css 预处理器：

ng set defaults.styleExt scss

有关更多信息，您可以在此处查看他们的文档：

https://github.com/angular/angular-cli

Answer 4

我注意到在移动到 scss 文件时有一个非常烦人的问题！！！必须从简单的 styleUrls: ['app.component.scss'] 移动到 styleUrls: ['./app.component.scss']（添加 ./）在 app.component.ts

当您生成一个新项目时 ng 会执行此操作，但似乎不会在创建默认项目时执行。如果您在 ng build 期间看到解决错误，请检查此问题。我只用了~1个小时。

Answer 5

更新 Angular 6+

新项目

当使用Angular CLI生成新项目时，将css预处理器指定为

使用SCSS语法

      ng new sassy-project --style=scss

使用SASS语法

      ng new sassy-project --style=sass

正在更新现有项目

在现有项目上设置默认样式运行

使用SCSS语法

      ng config schematics.@schematics/angular:component.styleext scss

使用SASS语法

      ng config schematics.@schematics/angular:component.styleext sass

以上命令会将您的工作区文件 (angular.json) 更新为

  "schematics": {
      "@schematics/angular:component": {
          "styleext": "scss"
      }
  }

其中 styleext 可以是 scss 或 sass，具体取决于选择。

Answer 6

告诉 angular-cli 默认总是使用 scss

为避免每次生成项目时都传递 --style scss，您可能需要全局调整 angular-cli 的默认配置，使用以下命令：

ng set --global defaults.styleExt scss

请注意，某些版本的 angular-cli 包含读取上述全局标志 (see link) 的错误。如果您的版本包含此错误，请使用以下命令生成您的项目：

ng new some_project_name --style=scss

Answer 7

最好是 ng new myApp --style=scss

然后 Angular CLI 将为您创建带有 scss 的任何新组件...

请注意，您可能知道，使用 scss 在浏览器中不起作用..因此我们需要一些东西将其编译为 css，因此我们可以使用 node-sass，像下面这样安装它：

npm install node-sass --save-dev

你应该可以开始了！

如果您使用 webpack，请阅读此处：

Command line inside project folder where your existing package.json is: npm install node-sass sass-loader raw-loader --save-dev

In webpack.common.js, search for "rules:" and add this object to the end of the rules array (don't forget to add a comma to the end of the previous object):

{
  test: /\.scss$/,
  exclude: /node_modules/,
  loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

Then in your component:

@Component({
  styleUrls: ['./filename.scss'],
})

If you want global CSS support then on the top level component (likely app.component.ts) remove encapsulation and include the SCSS:

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

@Component({
  selector: 'app',
  styleUrls: ['./bootstrap.scss'],
  encapsulation: ViewEncapsulation.None,
  template: ``
})
class App {}

来自 Angular 首发 here。

Answer 8

将其设置为全局默认值

ng set defaults.styleExt=scss --global

Answer 9

Angular-CLI 是推荐的方法，也是 Angular 2+ 社区的标准。

用S创建一个新项目CSS

ng new My-New-Project --style=sass

转换现有项目（CLI 低于 v6）

ng set defaults.styleExt scss

（必须使用此方法手动重命名所有 .css 文件，不要忘记在组件文件中重命名）

转换现有项目（CLI 大于 v6）

将所有 CSS 文件重命名为 SCSS 并更新引用它们的组件。
将以下内容添加到 angular.json 的 "schematics" 键（通常是第 11 行）：

"@schematics/angular:component": { "styleext": "sass" }

Answer 10

ng set --global defaults.styleExt=scss 自 ng6 以来已弃用。您将收到此消息：

get/set have been deprecated in favor of the config command

你应该使用：

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

如果您想针对特定项目（将 {project} 替换为您的项目名称）：

ng config projects.{project}.schematics.@schematics/angular:component '{ styleext: "scss"}'

Answer 11

TL;DR

Quick note: In Angular 9 & onwards, styleext is renamed to style

Angular 9 & 9+
While creating a new project:
ng new my-proj --style=scss

For an existing one:
ng schematics.@schematics/angular:component.style scss

For Angular 2 - Angular 8:
For an existing project:
ng config schematics.@schematics/angular:component.styleext scss

详细解答

Angular 9 岁和 9 岁以上：

通过 Angular CLI

ng config schematics.@schematics/angular:component.style scss

直接在`angular.json`:

"schematics": {
   "@schematics/angular:component": {
   "style": "scss"
   }
}

旧版本

通过 Angular CLI：

ng config schematics.@schematics/angular:component.styleext scss

直接在`angular.json`:

注意：查找 angular-cli.json 版本早于 6。对于版本 6 和 6+，文件已重命名为 angular.json

"schematics": {
   "@schematics/angular:component": {
   "styleext": "scss"
   }
 }

注：原始SO答案可见

Answer 12

以下应该在 angular CLI 6 项目中工作。即如果你得到：

get/set have been deprecated in favor of the config command.

npm install node-sass --save-dev

然后（确保更改项目名称）

ng config projects.YourPorjectName.schematics.@schematics/angular:component.styleext sass

要获取默认项目名称，请使用：

ng config defaultProject

但是： 如果您已将项目从 <6 迁移到 angular 6，那么很有可能配置不存在。在这种情况下，您可能会得到：

Invalid JSON character: "s" at 0:0

因此需要手动编辑 angular.json。

你会希望它看起来像这样（注意 styleex 属性）：

...
"projects": {
    "Sassy": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
...

对我来说似乎是一个过于复杂的架构。 ¯_(ツ)_/¯

您现在必须将所有 css/less 文件更改为 scss 并更新组件中的所有引用等，但您应该可以开始了。

Answer 13

CSS 预处理器集成 Angular CLI 支持所有主要的 CSS 预处理器：

要使用这些预处理器，只需将文件添加到组件的 styleUrls:

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

生成新项目时，您还可以定义样式文件的扩展名：

ng new sassy-project --style=sass

或在现有项目上设置默认样式：

ng config schematics.@schematics/angular:component.styleext scss

注意：@schematics/angular 是 Angular CLI

的默认原理图

添加到@Component.styles 数组的样式字符串必须写成CSS，因为CLI 无法将预处理器应用于内联样式。

基于 angular 文档 https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Answer 14

第一步。使用 npm

安装 bulma 包

npm install --save bulma

第二步。打开 angular.json 并更新以下代码

...
 "styles": [
 "node_modules/bulma/css/bulma.css",
 "src/styles.scss"
 ],
...

就是这样。

要轻松公开 Bulma 的工具，请将 stylePreprocessorOptions 添加到 angular.json。

...
 "styles": [
 "src/styles.scss",
 "node_modules/bulma/css/bulma.css"
  ],
 "stylePreprocessorOptions": {
 "includePaths": [
    "node_modules",
    "node_modules/bulma/sass/utilities"
 ]
},
...

BULMA + ANGULAR 6

Answer 15

截至 2019 年 3 月 10 日，Anguar 放弃了对 sass 的支持。无论您在运行 ng new 时传递给 --style 什么选项，您总是会生成 .scss 个文件。遗憾的是 sass 支持在没有任何解释的情况下被取消。

Answer 16

对于Angular 9.0及更高版本，更新angular.json文件中的"schematics":{}对象像这样：

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  },

  // Angular 13 may contain this as well; NOT related
  "@schematics/angular:application": {
    ...
  }
},

Answer 17

请勿使用 SASS 或 ANGULAR 的嵌入式 CSS 系统！！

我怎么强调都不为过。 Angular 的人不理解基本的级联风格 sheet 系统，因为当你使用这两种技术时 - 就像这个 angular.json 设置一样 - 编译器将你所有的 CSS 填充到 Javascript 模块然后将它们作为嵌入式 CSS 吐出到 HTML 页面的头部，这会破坏和混淆级联顺序并禁用本机 CSS 导入级联。

出于这个原因，我建议您从“ANGULAR.JSON”中删除所有样式引用，然后将它们手动添加回您的“index.html”中，如下所示：

<link href="styles/styles.css" rel="stylesheet" />

您现在拥有一个功能齐全的级联 CSS 系统，该系统通过多次刷新完全缓存在您的浏览器中，无需 ECMAScripted 马戏团技巧，节省大量带宽，增加 CSS 静态文件的整体管理，并完全控制你的级联顺序减去笨重的嵌入式 CSS 注入到你所有网页的头部，Angular 试图这样做。

当您了解如何在基本 CSS 文件中管理级联时，甚至不需要

SASS。对于那些费心使用少量链接 CSS 文件学习级联订单的人来说，具有复杂 CSS 的大型站点可以非常简单地管理。

Answer 18

对于 Angular 12 更新 angular.json 与：

"schematics": {
   "@schematics/angular:component": {
      "style": "scss"
    }
  }

和：

"build": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}

"test": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}

Angular CLI SASS 选项

Angular CLI SASS options

sass

angular-cli

angular

更新 Angular 6+

新项目

正在更新现有项目

告诉 angular-cli 默认总是使用 scss

详细解答

Angular 9 岁和 9 岁以上：

通过 Angular CLI

直接在angular.json:

旧版本

通过 Angular CLI：

直接在angular.json:

注意：@schematics/angular 是 Angular CLI

直接在`angular.json`:

直接在`angular.json`: