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??嵌入！./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

• CLI 提供了一个命令行标志，可以在创建新项目时更改您的风格ng new my-app --style=scss

• 正如您所看到的，扩展名是.scss，而不是.sass（至少对于您正在使用的语法而言，这是 LESS ）

• 你少了一个分号h1 { color: red; }

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