在 Angular CLI 中编译 Sass 时出错答案

【问题标题】：Error compiling Sass in Angular CLI在 Angular CLI 中编译 Sass 时出错
【发布时间】：2018-01-10 20:32:10
【问题描述】：

由于某种原因，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-loader 中的错误？{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./ ~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.sass 模块构建失败： .logo{ 边距顶部：4px; } ^ “...rgin-top:4px; }”之后的无效 CSS：预期 1 个选择器或规则，是“{}” 在 /Users/danielswater/Documents/MercadoLivre/src/styles.sass 中（第 10 行，第 26 列） @ ./src/styles.sass 4:14-187 @multi ./src/styles.sass

怎么了？这将是角度 CLI 的问题

【问题讨论】：

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

标签： sass angular-cli

【解决方案1】：

我在angular2也遇到过类似的问题

首先，您需要确保您的.angular-cli.json 具有.scss 作为默认样式扩展。

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

在那之后，我手动安装了 node-sass 和 sass-loader 修复了我的错误

npm i -D node-sass sass-loader

【讨论】：

【解决方案2】：

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

"apps": [
{

...

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

...

}
]

然后重启你的

ng serve

【讨论】：