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

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

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

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


当前回答

Ng set——全局默认值。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"}'

其他回答

引用自官方github回购这里-

以安装为例 NPM安装node-sass 将项目中的.css文件重命名为.scss或.sass。它们将被自动编译。 Angular2App的options参数有sassCompiler、lessCompiler、stylusCompiler和compassCompiler选项,它们直接传递给各自的CSS预处理器。

在这里看到的

https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

针对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根据选择。

博士TL; 注意:在Angular 9及以后的版本中,styleext被重命名为style Angular 9 & 9+在创建一个新项目时 对于现有的: ng图表.@schematics /角:组件。scss风格 对于Angular 2 - Angular 8: 对于一个现有的项目:ng config schematics.@schematics/angular:component。styleext scss

详细的回答

Angular 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答案可以在这里找到

不要使用SASS或ANGULAR的嵌入式CSS系统!!

这一点我怎么强调都不为过。当你同时使用这两种技术时,Angular的人不理解基本的级联样式表系统——就像这个Angular。json设置-编译器将所有CSS放入Javascript模块,然后将它们作为嵌入式CSS输出到HTML页面的头部,破坏和混淆级联顺序,并禁用原生CSS导入级联。

出于这个原因,我建议你从“ANGULAR.”中删除所有的样式引用。,然后手动将它们添加回“index.html”中,就像这样:

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

现在你有了一个功能齐全的级联CSS系统,它可以在多次刷新时完全缓存在你的浏览器中,无需ecmascript的杂技,节省大量带宽,增加静态文件中的CSS整体管理,并完全控制级联顺序,而不必像Angular尝试的那样将笨拙的嵌入CSS注入到所有web页面头部。

当您了解如何在基本CSS文件中管理级联时,甚至不需要使用SASS。对于那些使用少量链接的CSS文件学习级联顺序的人来说,具有复杂CSS的大型网站可以非常简单地管理。

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

为了避免每次生成项目时都传递——style scss,你可能想要全局调整angular-cli的默认配置,使用以下命令:

ng set --global defaults.styleExt scss

请注意,某些版本的angular-cli包含读取上述全局标志的错误(见链接)。如果你的版本包含这个错误,生成你的项目:

ng new some_project_name --style=scss