添加css后Javascript Angular 4 CLI SCSS问题

我刚刚使用angular 4的angular CLI创建了一个新的angular项目

我使用SCSS生成它，因此：

ng新myproject--样式=sass

在我添加一些css之前，它都编译得很好

例如，我将其添加到app.component.scss

.test {
    padding: 20px;
}

一旦我保存，就会出现以下错误：

未能编译

./src/app/app.component.sass
Module build failed: 
.test {
      ^
      Invalid CSS after ".test {": expected "}", was "{"
      in C:\Users\me\Documents\myproject\src\app\app.component.sass (line 1, column 8)
 @ ./src/app/app.component.ts 18:17-48
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

---

我做错了什么？

你把两件事混为一谈：SASS和SCSS

SASS语法：

.test
    padding: 20px

.test {
    padding: 20px;
}

SCSS语法：

.test
    padding: 20px

.test {
    padding: 20px;
}

尝试将文件重命名为

app.component.scss

，它应该可以工作

要将SCSS用作angular CLI项目的默认值，请在

.angular CLI.json

文件（在项目根目录中）中进行更新：

---

或者您可以使用

ng set defaults.styleExt scss

将其更改为

/src/app/app.component.scss

而不是

/src/app/app.component.sass

您也可以通过定义scss而不是sasso来执行相反的操作

ng new myproject--style=scss

，我可能在想要安装scss时安装了sass：（如果有办法更改cli以生成SCS而不是sass，或者我需要重新创建一个新项目吗？当然，我几分钟前用它编辑了我的答案，只需编辑

.angular cli.json

文件，我认为这应该足够了。无需担心为SCS安装新引擎，因为它与sass相同（sass只是它的一种不同语法）。