angular - Angular CLI SASS 选项

Question

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

我需要知道在新的 Angular 项目中处理 SASS 的最佳方法。ember-cli-sass由于 Angular-CLI 的许多核心组件是从 Ember-CLI 模块中运行的，因此我尝试使用该repo 来查看它是否可以发挥作用。

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

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

score 572 · Accepted Answer

Angular CLI 版本 9（用于创建 Angular 9 项目）现在style从原理图而不是styleext. 使用如下命令：
ng config schematics.@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& 如果您不知道其中的区别，请阅读这篇简短易懂的文章，如果您仍然不知道，请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"
    }
}

score 352 · Accepted Answer

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

wherestyleext可以是scss或者sass根据选择。

score 40 · Accepted Answer

此处引用来自官方 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

score 27 · Accepted Answer

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

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

ng set --global defaults.styleExt scss

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

ng new some_project_name --style=scss

score 22 · Accepted Answer

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

ng new My_New_Project --style=scss

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

ng set defaults.styleExt scss

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

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

score 16 · Accepted Answer

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

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

score 6 · Accepted Answer

最好的可能是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 入门。

score 6 · Accepted Answer

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

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

你应该使用：

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

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

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

score 5 · Accepted Answer

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

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

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

score 4 · Accepted Answer

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

score 4 · Accepted Answer

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

score 3 · Accepted Answer

以下内容应适用于 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 并更新组件等中的任何引用，但您应该一切顺利。

score 2 · Accepted Answer

2

将其设置为全局默认值

ng set defaults.styleExt=scss --global

于 2018-02-12T11:00:45.383 回答

score 2 · Accepted Answer

TL;博士

快速说明：在 Angular 9 及更高版本中，styleext重命名为style

Angular 9 和 9+
创建新项目时：
ng new my-proj --style=scss

对于现有的：
ng schematics.@schematics/angular:component.style scss

对于 Angular 2 - Angular 8：
对于现有项目：
ng config schematics.@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`：

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

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

注意：原始SO答案可以在这里找到

score 1 · Accepted Answer

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

score 1 · Accepted Answer

对于 Angular 12 更新 angular.json ：

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

和：

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

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

score -1 · Accepted Answer

第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"
 ]
},
...

布尔玛 + 角 6

score -7 · Accepted Answer

不要使用 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 的大型网站可以非常容易地管理。

angular - Angular CLI SASS 选项

18 回答 18

Angular 6+ 的更新

新项目

更新现有项目

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

详细解答

角 9 和 9+：

通过 Angular CLI

直接在angular.json：

对于旧版本

通过 Angular CLI：

直接在angular.json：

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

Related

Reference

直接在`angular.json`：

直接在`angular.json`：