Angular CLI 7:Sass编译失败

时间:2018-10-25 12:23:41

标签: javascript angular sass angular-cli

不久前,我安装了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列)

如何解决?以及为什么会这样?

4 个答案:

答案 0 :(得分:2)

  • 在使用ng new my-app --style=scss

  • 创建新项目时,CLI提供了命令行标志来更改样式。
  • 如您所见,扩展名是.scss,而不是.sass(至少对于您使用的语法为LESS)

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

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

答案 1 :(得分:1)

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

h1
   color: red,
   align: center
   ...

答案 2 :(得分:0)

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

npm安装node-sass

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

答案 3 :(得分:0)

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