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

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

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

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

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 6+

1. 新项目

   当生成一个新的项目与角CLI，指定CSS预处理器

   • 使用SCSS语法

     ng new sassy-project --style=scss
     

   • 使用SASS语法

     ng new sassy-project --style=sass
     

2. 更新现有项目

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

   • 使用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根据选择。

原始答案（对于Angular <6）

新项目

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

• 使用SASS语法

  ng new project --style=sass 
  

• 使用SCSS语法

  ng new project --style=scss 
  

然后安装node-sass，

npm install node-sass --save-dev

更新现有项目

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

npm install node-sass --save-dev 

安装node-sass。然后

• 用于SASS语法

  ng set defaults.styleExt sass
  

• 用于SCSS语法

  ng set defaults.styleExt scss
  

将默认的styleExt设置为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"
        ],
  

从官方github回购这里引用-

例如，要使用一个，只需安装

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包含一个读取上述全局标志的错误（请参阅链接）。如果您的版本包含此错误，请使用以下命令生成项目：

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']（add ./）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：”，然后将此对象添加到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入门版开始。

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

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

使用SCSS创建一个新项目

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

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

ng set defaults.styleExt scss

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

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

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

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

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

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

以下内容应在有角度的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迁移到角度6，则很有可能不会出现该配置。在这种情况下，您可能会得到：

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

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

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

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

在我看来，似乎是一个过于复杂的架构。¯_（ツ）_ /¯

现在，您必须将所有的CSS / less文件更改为scss，并更新组件等中的任何引用，但是您应该很好。

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

将其设置为全局默认值

ng set defaults.styleExt=scss --global

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-preprocessors

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

ng set defaults.styleExt scss

但是得到这个

不赞成使用get / set，而推荐使用config命令。

• 角CLI：6.0.7
• 节点：8.9.0
• 操作系统：Linux x64
• 角度：6.0.3

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

ng new my-sassy-app --style = 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"
 ]
},
...

布尔玛+角6