Question

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

开始清理项目

ng new my-app

我为CSS选择了预编译器SASS，但是当我编辑文件styles.sass却无法正常工作时，我的styles.sass看起来像这样

h1 { color: red }

但是服务显示此消息

无法编译。

./ 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

在使用ng new my-app --style=scss
如您所见，扩展名是.scss，而不是.sass（至少对于您使用的语法为LESS）
您缺少分号h1 { color: red; }
如果不重新创建新项目来解决该问题，请记住相应地更新angular.json和组件文件

Answer 2

伙计...我想你的罪人可能是错的，请看https://sass-lang.com/guide 你应该使用

h1
   color: red,
   align: center
   ...

Answer 3

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

npm安装node-sass

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

Answer 4

遇到相同的问题，尝试了所有操作，包括重新安装所有软件包和节点本身，但没有一个有帮助。
最后，该项目被克隆到 D：\ somefolder ，而不是我之前克隆的 Desktop 。然后它编译没有任何问题，并且运行良好。

Angular CLI 7：Sass编译失败

4 个答案: