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

其他回答

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”:“萨斯” }

设置为全局默认值

Ng设置默认值。styleExt = scss——全球

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

最好是ng新的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:”并将该对象添加到 规则数组的结尾(不要忘记在数组的末尾添加逗号 以前的对象):

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

然后在你的组件中:

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

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

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

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

这里是Angular starter。

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

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

ng set --global defaults.styleExt scss

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

ng new some_project_name --style=scss