[英]Angular CLI 7: Sass failed to compile
few moments ago I installed Angular Cli 7 and started clean project by 不久前我安装了Angular Cli 7并开始了清洁项目
ng new my-app
I selected precompiler SASS for css, but when I'm editing file styles.sass then is not working, my styles.sass looks like this 我为css选择了预编译器SASS,但是当我正在编辑文件样式。然后它不起作用时,我的styles.sass看起来像这样
h1 { color: red }
but ng serve show this message 但ng服务显示此消息
Failed to compile.
编译失败。
./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) Module build failed (from ./node_modules/sass-loader/lib/loader.js):
./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 { ^ Invalid CSS after "h1 {": expected "}", was "{" in /Users/a/Documents/angular-projects/my-app/src/styles.sass (line 1, column 5)
h1 {^“h1 {”:期望“}”之后的无效CSS,在/Users/a/Documents/angular-projects/my-app/src/styles.sass中为“{”(第1行,第5列)
how to fix it? 怎么解决? and why that's happen?
为什么会这样?
The CLI offers a command line flag to change your style when creating a new project with ng new my-app --style=scss
CLI提供了一个命令行标志,用于在使用
ng new my-app --style=scss
创建新项目时更改样式
As you can see, the extension is .scss
, not .sass
(at least for the syntax you're using, which is LESS) 正如你所看到的,扩展性
.scss
,不.sass
(至少在你使用的语法,这是LESS)
You are missing a semicolon h1 { color: red; }
你错过了一个分号
h1 { color: red; }
h1 { color: red; }
Remember to update your angular.json
and component files accordingly if you don't reecreate a new project to resolve that 如果不重新创建新项目来解决这个问题,请记住相应地更新
angular.json
和组件文件
dude ... I think your sintaxe maybe be wrong, look at https://sass-lang.com/guide you shoulding use 老兄...我认为你的sintaxe可能是错的,请看你正在使用的https://sass-lang.com/guide
h1
color: red,
align: center
...
Could be because you upgraded your node. 可能是因为您升级了节点。 Try installing node-sass
尝试安装node-sass
npm install node-sass npm install node-sass
More details about node-sass on https://www.npmjs.com/package/node-sass 有关node-sass的更多详细信息, 请访问https://www.npmjs.com/package/node-sass
Had the same problem, tried everything including reinstalling all the packages and node itself and none of them helped. 有同样的问题,尝试了一切,包括重新安装所有的包和节点本身,但没有一个帮助。
Finally the project was cloned to D:\\somefolder instead of the Desktop where I was cloning before. 最后,项目被克隆到D:\\ somefolder而不是我之前克隆的桌面 。 Then it compiled without any issues and worked fine.
然后它编译没有任何问题,并正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.