Angular CLI 7:Sass 编译失败

Question

不久前，我安装了 Angular Cli 7 并开始了干净的项目

ng new my-app

我为 css 选择了预编译器 ASS，但是当我编辑文件 styles.sass 时不起作用，我的 styles.sass 看起来像这样

h1 { color: red }

但是 ng 服务显示此消息

编译失败。

./src/styles.sass (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js！./node_modules/postcss-loader/src？？嵌入式！。/node_modules/sass-loader/lib/loader.js？？参考--14-3！./src/styles.sass( 模块构建失败(来自./node_modules/sass-loader/lib/loader.js(：

h1 { ^ "h1 {"之后的 CSS 无效：预期的 "}"，为 "{" in/Users/a/Documents/angular-projects/my-app/src/styles.sass (第 1 行，第 5 栏(

如何解决？为什么会这样？

Answer 1

• CLI 提供了一个命令行标志，用于在使用ng new my-app --style=scss创建新项目时更改样式

• 如您所见，扩展名是.scss，而不是.sass(至少对于您正在使用的语法，它更少(

• 您缺少分号h1 { color: red; }

• 如果您不重新创建新项目来解决此问题，请记住相应地更新您的angular.json和组件文件

Answer 2

可能是因为你升级了节点。 尝试安装 node-sass

npm install node-sass

有关节点上的更多详细信息 https://www.npmjs.com/package/node-sass

Answer 3

伙计...我想你的辛塔克斯可能是错的，看看 https://sass-lang.com/guide 你应该使用

h1
color: red,
align: center
...

Answer 4

遇到了同样的问题，尝试了所有方法，包括重新安装所有软件包和节点本身，但没有一个帮助。
最后，该项目被克隆到D：\somefolder，而不是我之前克隆的桌面。然后它编译没有任何问题并且工作正常。