Angular CLI SASS选项

理查德Itachi2020-03-17

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

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

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

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

番长卡卡西2020/03/17 17:08:19

步骤1。使用npm安装bulma软件包

npm install --save bulma

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

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

而已。

To easily expose Bulma’s tools, add stylePreprocessorOptions to angular.json.

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

BULMA + ANGULAR 6

乐小哥L2020/03/17 17:08:19

我尝试使用此命令更新项目以使用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

但是，如果有人可以共享更新现有项目的方式，我将不胜感激，因为那样很好。

斯丁小小2020/03/17 17:08:19

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

Tony阳光2020/03/17 17:08:19

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的“示意图”键（通常是第11行）：

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

西里凯2020/03/17 17:08:19

将其设置为全局默认值

ng set defaults.styleExt=scss --global

Sam猪猪2020/03/17 17:08:19

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

猪猪猿小哥2020/03/17 17:08:19

当您使用angular cli创建项目时，请尝试以下操作：

ng new My_New_Project --style=sass

This generating all your components with predifined sass files.

If you want scss syntax create your project with :

ng new My_New_Project --style=scss

If you are changing your existing style in your project

ng set defaults.styleExt scss

Cli handles the rest of it.

For Latest Versions

For Angular 6 to set new style on existing project with CLI:

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

Or Directly into angular.json:

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

小宇宙前端2020/03/17 17:08:19

从官方github回购这里引用-

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

npm install node-sass

并将项目中的.css文件重命名为.scss或.sass。它们将自动编译。Angular2App的options参数具有sassCompiler，lessCompiler，stylusCompiler和CompassCompiler选项，这些选项直接传递给各自的CSS预处理器。

看这里