在Angular CLI中编译Sass时出错

出于某种原因，angular cli不编译sass文件。这是我的sass文件：

/* You can add global styles to this file, and also import other style files */

/* Variáveis */
$bodyColor: #f1f1f1;

body { background: $bodyColor; margin: 0px; }

header{ background-color: #FFF059; width:100%; height: 54px; border-bottom: 1px solid #D9D9D9; }

.logo{ margin-top:4px; }

这是控制台中显示的错误：

在./~/css加载程序中出错？{“sourceMap”：false，“importLoaders”：1}/~/邮政编码加载器？{“标识”：“邮政编码”}/~/sass-loader/lib/loader.js？{“sourceMap”：false，“precision”：8，“includePaths”：[]}/src/styles.sass 模块生成失败： .logo{margin top:4px；} ^ “…rgin top:4px；}”后的CSS无效：应为1个选择器或at规则，为“{}” 在/Users/danielsweater/Documents/MercadoLivre/src/styles.sass中（第10行，第26列） @./src/styles.sass 4:14-187 @multi./src/styles.sass

---

怎么了？这将是angular CLI的一个问题

我在

angular2

首先，您需要确保

.angular cli.json

具有

.scss

作为defaut样式扩展

"defaults": {
    "styleExt": "css",
    "component": {}
  }

之后，我手动安装了

节点sass

和

sass加载程序

，修复了我的错误

npm i -D node-sass sass-loader 

---

您必须在.angular-cli.json文件中包含scss文件，如“bootstrap.scss”，如下所示：

"apps": [
{

...

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "styles.css"
],
"scripts": [
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"
]

...

}
]

然后重新启动您的

ng serve

---

您是在组件css属性中使用它还是像全局css一样使用它