Angular CLI SASS选项

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

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

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

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

222030 次浏览
小开

引用自官方github回购这里-

以安装为例

npm install node-sass

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

在这里看到的

小开
最佳答案

Angular CLI版本9(用于创建Angular 9项目)现在从schematics中获取style而不是styleext。使用如下命令:
ng config schematics.@schematics/angular:component.style scss
，结果< >强angular.json < / >强看起来像这样

"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
}
< p > 其他可能的解决方案&解释: < br > < br > 要使用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"
}
}
小开

就像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'](在app.component.ts中添加./)

ng在生成新项目时这样做，但在创建默认项目时似乎不这样做。如果在ng构建过程中看到resolve错误，请检查此问题。我只花了1个小时。

小开

针对Angular 6+的更新

新项目

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

  • < p > 使用SCSS语法

          ng new sassy-project --style=scss
  • < p > 使用SASS语法

          ng new sassy-project --style=sass

更新现有项目

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

  • < p > 使用SCSS语法

          ng config schematics.@schematics/angular:component.styleext scss
  • < p > 使用SASS语法

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

    上面的命令将更新你的工作空间文件(angular.json)

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

其中styleext可以根据选择为scss或sass。

小开

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

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

ng set --global defaults.styleExt scss
< p > < br > 请注意，某些版本的angular-cli包含读取上述全局标志(看到链接)的错误。如果你的版本包含这个错误，生成你的项目:

ng new some_project_name --style=scss
小开

最好是ng new myApp --style=scss

然后，角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 < / p >

在webpack.common.js中，搜索"rules:"并将此对象添加到 规则数组的结尾(不要忘记在数组的末尾添加逗号 以前的对象):< / p > 

{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
}

然后在你的组件中:

@Component({
styleUrls: ['./filename.scss'],
})

如果你想要全局CSS支持，那么在顶级组件(可能 移除封装并包含SCSS:

.ts 
import {ViewEncapsulation} from '@angular/core';


@Component({
selector: 'app',
styleUrls: ['./bootstrap.scss'],
encapsulation: ViewEncapsulation.None,
template: ``
})
class App {}

Angular starter 在这里。

小开

设置为全局默认值

ng set defaults.styleExt=scss --global

小开

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

克里特岛与SCSS的新项目

< p > ng new My-New-Project --style=sass

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

ng set defaults.styleExt scss

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

< p > < br > 转换现有项目(CLI大于v6)

  1. 将所有CSS文件重命名为SCSS，并更新引用它们的组件。
  2. 将以下内容添加到angular的“schematics”键中。Json(通常是第11行):
< p > <代码>“@schematics /角:组件”:{ “styleext”:“萨斯” 代码}< / > < / p >
小开

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

博士TL;

快速注:在Angular 9 &之后，styleext被重命名为style

ng new my-proj --style=scss
创建新项目时

对于已存在的:
ng schematics.@schematics/angular:component.style scss < / p > < p > 对于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中:

请注意:查找版本大于6的angular-cli.json。版本6 &6+文件已重命名为angular.json

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

注:原来的SO答案可以找到here . >

小开

下面的代码应该在angular 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迁移到angular 6，很有可能配置不会在那里。在这种情况下，你可能会得到:

无效的JSON字符:“s”在0:0

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

你会希望它看起来像这样(注意styleex属性):

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

对我来说，这似乎是一个过于复杂的模式。¯_()_/¯

你现在必须去改变你所有的css/less文件为scss和更新组件等任何引用，但你应该很好去。

小开
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不能对内联样式应用预处理程序。

基于angular文档 https://github.com/angular/angular-cli/wiki/stories-css-preprocessors < / p >
小开

步骤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"
]
},
...

< a href = " https://blog.jcarlson。BULMA - ANGULAR -6/" rel="nofollow noreferrer">BULMA + ANGULAR 6

小开

截至2019年3月10日，安圭尔放弃了对萨斯的支持。不管你在运行ng new时传递给--style什么选项，你总是会生成.scss文件。很遗憾，没有任何解释就取消了粗鲁的支持。

小开

对于9.0角和更新的对象，像这样更新angular.json文件中的"schematics":{}对象:

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


// Angular 13 may contain this as well; NOT related
"@schematics/angular:application": {
...
}
},
小开

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

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

因此，我建议你从“angular . json”中删除所有的样式引用，然后将它们重新添加到你的“index.html”中。手动链接如下:

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

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

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

小开

对于Angular 12，更新Angular。json:

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

和:

"build": {
"options": {
...
"inlineStyleLanguage": "scss"
}
}


"test": {
"options": {
...
"inlineStyleLanguage": "scss"
}
}

提交答案