Question

由于某种原因，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; }

这就是控制台中出现的错误：

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}！。/ 〜/ SASS装载机/ LIB / loader.js { “sourceMap”：假， “精确”：8中， “的includepaths”：[]}？！./ SRC / styles.sass 模块构建失败： .logo {margin-top：4px; } ^ “... rgin-top：4px;}”之后的无效CSS：预期的1个选择器或at-rule，为“{}” 在/Users/danielswater/Documents/MercadoLivre/src/styles.sass(第10行，第26栏） @ ./src/styles.sass 4：14-187 @ multi ./src/styles.sass

有什么问题？这将是一个角度CLI

的问题

Answer 1

我在angular2

中遇到过类似的问题

首先，您需要确保.angular-cli.json已将.scss作为defaut样式扩展名。

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

事后，我手动安装node-sass和sass-loader来修复我的错误

npm i -D node-sass sass-loader

Answer 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

在Angular CLI中编译Sass时出错

2 个答案: