Angular CLI 7：Sass 无法编译

Question

不久前，我安装了 Angular Cli 7 并通过

开始了干净的项目

ng new my-app

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

h1 { color: red }

但 ng serve 显示此消息

编译失败。

./src/styles.sass (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass -loader/lib/loader.js??ref--14-3!./src/styles.sass) 模块构建失败（来自 ./node_modules/sass-loader/lib/loader.js）：

h1 { ^ “h1 {”之后的无效 CSS：预期的“}”，是“{” 在 /Users/a/Documents/angular-projects/my-app/src/styles.sass （第 1 行，第 5 列）

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

Answer 1

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

Answer 2

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

npm install node-sass

关于 node-sass 的更多细节 https://www.npmjs.com/package/node-sass

Answer 3

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

• 如您所见，扩展名是 .scss，而不是 .sass（至少对于您使用的语法，即 LESS）

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

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

Answer 4

dude ...我认为您的 sintaxe 可能是错误的，请查看 https://sass-lang.com/guide 你应该使用

h1
   color: red,
   align: center
   ...