Angular CLI SASS选项_编程黑洞网

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

我需要了解在新的Angular项目中处理SASS的最佳方法。由于Angular-CLI的许多核心组件都使用了Ember-CLI模块，因此我尝试使用ember-cli-sass存储库来查看是否可以正常运行。

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

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

您可以看看它如何在github.com/angular/material2中使用，例如按钮组件github.com/angular/material2/tree/master/src/components/button

#1 楼

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

然后，您可以从此文件中的angular.cli.json进行更改，其中包含“默认值”：{“ styleExt”：“ css”，“ prefixInterfaces”：false，“ inline”：{“ style”：false，“ template”：您可以更改styleExt

–麦肯·迪肯（Mertcan Diken）
16-11-16在19:41

ng set defaults.styleExt scss

– Sebas
17年1月30日在10:54

不要忘记在.angular-cli.json中将style属性更改为scss

–OST
17-10-18在21:01

ng set defaults.styleExt scss --global

–约书亚·大卫
17年11月19日在20:58

让Angular 6在现有项目ng config逻辑示意图上设置新样式。@ schematics / angular：component.styleext scss

– Nehal Damania
18年5月22日在11:50

#2 楼

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

< br上面的命令将使用
更新您的工作空间文件（angular.json）。

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

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

原始答案（针对Angular <6）

新项目

>对于新项目，我们可以根据所需的口味SASS / SCSS设置选项--style=sass或--style=scss

使用SASS语法

ng new project --style=sass

使用SCSS语法

ng new project --style=scss

，然后安装node-sass，

npm install node-sass --save-dev

更新现有项目

要使angular-cli可以用node-sass编译sass文件，我必须运行，

npm install node-sass --save-dev

，安装node-sass。然后

用于SASS语法

ng set defaults.styleExt sass

用于SCSS语法

ng set defaults.styleExt scss

将默认样式设置为sass

（或）

将styleExt更改为sass或scss以获取所需的语法在.angular-cli.json中，

用于SASS语法

"defaults": {
     "styleExt": "sass",
}

用于SCSS语法

"defaults": {
     "styleExt": "scss",
}

尽管生成了编译器错误。

ERROR in multi styles
Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'
 @ multi styles

通过将.angular-cli.json的行更改为

"styles": [
        "styles.css"
      ],

到任一，

来更改SASS语法

"styles": [
        "styles.sass"
      ],

适用于SCSS语法

"styles": [
        "styles.scss"
      ],

唯一困扰我的是，angular-cli.json实际上是.angular-cli.json。一旦意识到这一点，便对其进行了编辑，并且效果很好。谢谢。

– OldTimeGuitarGuy
17年4月26日在18:03

@OldTimeGuitarGuy感谢您指出这一点，该文件曾经名为angular-cli.json，最近被更改为隐藏文件（.angular-cli.json）（rc2）。固定。

–一切皆有可能
17年4月26日在18:13

如果要重命名现有的.css文件，则可能需要在编辑器中将其关闭并重新打开，以使其正确识别sass语法。即使使用最新的Visual Studio，也是如此，

–Simon_Weaver
18年1月6日在10:04

对于角度6节点，已经安装了ass-sass，因此无需安装它。

–布伦特
'18 Sep 1'在13:48

我有相同的设置，但是将scss文件直接导入到组件中无法正常工作，而将它们导入到styles.scss中也可以正常工作。我正在使用clicliison 7+，是否有任何错误？

– Hemant Sankhla
19年1月16日在10:30

#3 楼

从官方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

可能想添加--save-dev，不知道为什么它不在文档中，但是在升级时丢失了，然后又弄不清楚为什么样式消失了

– regnar
16年6月17日在17:35

存在一个问题，其中还编译了带有下划线的Sass文件，但此问题已在angular-cli 1.0.0-beta.9版本中修复。

–安迪·福特（Andy Ford）
16年7月7日在11:38

链接已更改为：github.com/angular/angular-cli/wiki/stories-css-preprocessors

–马丁
17年6月26日在13:23

#4 楼

告诉angular-cli默认情况下始终使用scss

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

ng set --global defaults.styleExt scss

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

ng new some_project_name --style=scss

我正在使用angularCLI 1.2.1版（截至2017年7月），并且遇到了您描述的错误。我运行了此命令，默认情况下它似乎完美地适合于新组件，但是除非我指定--style = scss，否则新项目仍会创建app.component.css。

–杰里米·莫里茨（Jeremy Moritz）
17年7月20日在22:04

#5 楼

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

ng new My_New_Project --style=scss

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

ng set defaults.styleExt scss

有关更多信息，请参见此处获取其文档：

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

ng set似乎不适用于apps数组中的设置。例如。 ng set apps.prefix等会在位置0处引发“ JSON中的意外令牌b”。

–im1dermike
17年2月16日在16:42

#6 楼

我注意到在移至scss文件时非常烦恼！！！必须从一个简单的步骤：styleUrls: ['app.component.scss']到styleUrls: ['./app.component.scss']中的./（添加app.component.ts）

在生成新项目时会这样做，但在创建默认项目时似乎不会。如果在ng生成期间看到解决错误，请检查此问题。只花了我大约1个小时。

对于那些懒得搜索的人来说，这是在app.component.ts中：

–embee
17年5月16日在20:29

#7 楼

最好是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：”，然后将此对象添加到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启动器。

#8 楼

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

与未找到配置或获取/设置相关的角度6已弃用

– aloisdg移至codidact.com
18年5月29日在10:03

#9 楼

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

使用SCSS创建一个新项目

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

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

ng set defaults.styleExt scss

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

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

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

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

#10 楼

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

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

谢谢，我想知道为什么它不起作用，事实证明他们现在将其重命名为样式

–迪诺
20 May 10 '23：57

#11 楼

以下应在有角度的CLI 6项目中工作。即，如果您正在获取：

取而代之的是使用config命令。

npm install node-sass --save-dev

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

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

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

ng config defaultProject

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

无效的JSON字符：“ 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，并更新组件中的任何引用等，但是您应该一切顺利。 br />

#12 楼

截至2019年3月10日，安瓜尔放弃了对sass的支持。无论运行--style时传递给ng new的选项如何，始终会生成.scss文件。可笑的是，没有任何解释就放弃了无礼的支持。

对于在2019年3月10日之后为此奋斗的人：Angular在8.0.0-beta.5中重新引入了对angular-cli的sass支持，它应尽快返回主发行分支。您可以使用npm install -g @ angular / cli @ 8.0.0-beta.5安装预发行版。

–mkrl
19年3月13日在7:07

有趣。感谢您的提醒。出于好奇，您知道他们为什么首先放弃支持吗？

–只是一个学习者
19年3月13日在7:10

显然，Angular团队将其称为“不再相关”的语法，至少核心团队成员在本PR中已说明了这一点，但找不到任何进一步的信息。

–mkrl
19年3月13日在7:17

#13 楼

将其设置为全局默认值

ng set defaults.styleExt=scss --global

#14 楼

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无法将预处理器应用于内联样式。

基于角度文档
https://github.com/angular/angular-cli/wiki/stories-css-预处理器

#15 楼

我尝试使用此命令更新项目以使用sass

ng设置defaults.styleExt scss

，但是得到了这个

不赞成使用get / set来支持config命令。

Angular CLI：6.0.7
节点：8.9 .0
操作系统：linux x64
角度：6.0.3

因此，我删除了我的项目（因为我刚刚开始，项目中没有代码），并创建了一个新的sass最初设置了

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

但是如果有人可以分享，我将不胜感激一种更新现有项目的方法，那样很好。

有人为这里现有的Angular 6项目回答了这个问题

– Padigan
18年6月4日在19:02

#16 楼

第1步。使用npm

npm install --save bulma

Step2安装bulma软件包。打开angular.json并更新以下代码

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

就这样。

要轻松展示布尔玛的工具，请将stylePreprocessorOptions添加到angular.json。 br />

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

布尔加+角钢6

这完全不符合角度标准，使用scss只是使用bulma的次要效果

– netalex
18/12/12在12:20

#17 楼

请勿使用SASS或Angular的嵌入式CSS系统！ Angular的人们不了解基本的级联样式表系统，因为当您同时使用这两种技术时（如使用angular.json设置），编译器将所有CSS填充到Javascript模块中，然后将它们吐出到HTML页面的开头，作为嵌入式对象会破坏和混淆级联顺序并禁用本机CSS导入级联的CSS。
出于这个原因，我建议您从“ ANGULAR.JSON”中删除所有样式引用，然后手动将它们重新添加到“ index.html”中作为链接像这样：

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

现在，您已经拥有一个功能齐全的级联CSS系统，可以通过许多刷新完全缓存在浏览器中，而无需使用ECMA脚本杂技技巧，从而节省了大量带宽，提高了CSS对静态文件的整体管理，并完全控制您的级联顺序，再减去Angular试图插入所有网页头部的笨拙嵌入式CSS。
当您了解如何在基本的基础上管理级联时，甚至不需要SASS CSS文件。对于那些使用少量链接的CSS文件来学习级联顺序的网站而言，具有复杂CSS的大型网站的管理非常简单。

编程黑洞网

Angular CLI SASS选项

评论