Angular CLI SASS选项

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

我需要知道在一个新的Angular项目中处理SASS的最佳方法。我尝试使用Ember-CLI -sass回购，看看它是否能正常运行，因为Angular-CLI的许多核心组件都是在Ember-CLI模块上运行的。

它没有工作，但比再次不确定，如果我只是配置错误的东西。

另外，在新的Angular项目中组织样式的最佳方法是什么?如果能将sass文件与组件放在同一个文件夹中就太好了。

当前回答

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

克里特岛与SCSS的新项目

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

转换现有项目(CLI小于v6)

Ng设置默认值。styleExt scss

(必须手动重命名所有的。css文件，不要忘记重命名你的组件文件)

转换现有项目(CLI大于v6)

将所有CSS文件重命名为SCSS，并更新引用它们的组件。将以下内容添加到angular的“schematics”键中。Json(通常是第11行):

“@schematics /角:组件":{ “styleext”:“萨斯” ｝

2018-05-08 23:02:19

其他回答

步骤1。使用npm安装bulma包

npm install --save bulma

步骤2。开放的角。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

2018-09-01 10:40:10

针对Angular 6+的更新

新项目

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

使用SCSS语法 Ng新的ssy-project——style=scss 使用SASS语法 Ng新的时髦项目——style=sass

更新现有项目

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

使用SCSS语法 Ng config schematics.@schematics/angular:组件。styleext scss 使用SASS语法 Ng config schematics.@schematics/angular:组件。styleext sass 上面的命令将更新你的工作空间文件(angular.json) “图表”:{ “@schematics /角:组件":{ :“styleext scss” ｝｝

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

2017-01-09 04:28:01

Angular CLI版本9(用于创建Angular 9项目)现在从schematics中获取style，而不是styleext。使用如下命令: Ng config schematics.@schematics/angular:组件。样式scsand和生成的角。Json应该是这样的 “图表”:{ “@schematics /角:组件":{ “风格”:“scss” ｝｝

其他可能的解决方案和解释: 用angular CLI创建一个支持sass的新项目，试试这个:

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

2016-10-02 11:08:24