不久前,我安装了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列)
如何解决?以及为什么会这样?
答案 0 :(得分:2)
在使用ng new my-app --style=scss
如您所见,扩展名是.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 。然后它编译没有任何问题,并且运行良好。