Angular CLI SASS 选项

Angular CLI 版本 9（用于创建 Angular 9 项目）现在从原理图而不是 styleext 中获取样式。使用如下命令： ng configSchematics.@schematics/angular:component.style scss 生成的 angular.json 应如下所示 "schematics": { "@schematics/angular:component": { "style": "scss " } }

其他可能的解决方案和解释：要使用支持 sass 的 angular CLI 创建一个新项目，请尝试以下操作：

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

---

Angular 6+ 的更新

新项目

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

使用 SCSS 语法 ng new sassy-project --style=scss

使用 SASS 语法 ng new sassy-project --style=sass

更新现有项目

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

使用 SCSS 语法 ng config schemas.@schemics/angular:component.styleext scss

使用 SASS 语法 ng configSchematics.@schematics/angular:component.styleext sass 上面的命令将使用 "schematics": { "@schematics/angular:component": { "styleext": " scss" } }

根据选择，其中 styleext 可以是 scss 或 sass。

---

此处引用来自官方 github repo -

要使用一个，只需安装例如 npm install node-sass 并将项目中的 .css 文件重命名为 .scss 或 .sass。它们将被自动编译。 Angular2App 的 options 参数有 sassCompiler、lessCompiler、stylusCompiler 和 compassCompiler 选项，它们直接传递给它们各自的 CSS 预处理器。

看这里

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

---

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

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

ng set --global defaults.styleExt scss

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

ng new some_project_name --style=scss

---

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

ng new My_New_Project --style=scss 

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

ng set defaults.styleExt scss

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

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

---

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

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

---

最好的可能是ng new myApp --style=scss

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

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

npm install node-sass --save-dev

你应该好好去！

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

现有 package.json 所在的项目文件夹中的命令行： npm install node-sass sass-loader raw-loader --save-dev 在 webpack.common.js 中，搜索“rules:”并将此对象添加到末尾规则数组（不要忘记在前一个对象的末尾添加一个逗号）：

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

然后在您的组件中：

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

如果你想要全局 CSS 支持，那么在顶级组件（可能是 app.component.ts）上移除封装并包含 SCSS：

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

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

来自 Angular 初学者 here。

---

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

get/set 已被弃用，取而代之的是 config 命令

你应该使用：

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

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

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

---

对于 Angular 9.0 及更高版本，更新 angular.json 文件中的 "schematics":{} 对象，如下所示：

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

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

---

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

使用 SCSS 创建一个新项目

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

---

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

---

以下内容应适用于 Angular CLI 6 项目。即，如果你得到：

get/set 已被弃用，取而代之的是 config 命令。

npm install node-sass --save-dev

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

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

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

ng config defaultProject

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

无效的 JSON 字符：0:0 处的“s”

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

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

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

对我来说，这似乎是一个过于复杂的模式。 ¯_(ツ)_/¯

您现在必须将所有 css/less 文件更改为 scss 并更新组件等中的任何引用，但您应该一切顺利。

---

将其设置为全局默认值

ng set defaults.styleExt=scss --global

---

TL;DR 快速说明：在 Angular 9 及更高版本中，styleext 被重命名为 Angular 9 和 9+ 样式创建新项目时：ng new my-proj --style=scss 对于现有项目：ng scheme.@schematics/angular :component.style scss 对于 Angular 2 - Angular 8：对于现有项目：ng configSchematics.@schematics/angular:component.styleext scss

详细解答

角 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 中：

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

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

注意：可以找到原始 SO 答案here

---

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

注意：@schemics/angular 是 Angular CLI 的默认原理图

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

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

---

对于 Angular 12 更新 angular.json ：

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

和：

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

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

---

步骤1。使用 npm 安装 bulma 包

npm install --save bulma

第2步。打开 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

---

不要使用 SASS 或 Angular 的嵌入式 CSS 系统！！

我不能强调这一点。 Angular 的人不了解基本的级联样式表系统，因为当您同时使用这两种技术时——就像使用这个 angular.json 设置一样——编译器将所有 CSS 填充到 Javascript 模块中，然后将它们作为嵌入的 HTML 页面的头部吐出破坏和混淆级联顺序并禁用原生 CSS 导入级联的 CSS。

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

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

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

当您了解如何在基本 CSS 文件中管理级联时，甚至不需要 SASS。对于那些使用少量链接的 CSS 文件来学习级联顺序的人来说，具有复杂 CSS 的大型网站可以非常容易地管理。

---