添加css后的Javascript Angular 4 CLI SCSS问题

Question

我刚刚使用 Angular CLI for Angular 4 创建了一个新的 Angular 项目。

我是用 SCSS 生成的，所以：

ng new myproject --style=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

我做错了什么？

Answer 1

你混合了两个东西：SASS 和 SCSS。

SASS 语法：

.test
    padding: 20px

SCSS 语法：

.test {
    padding: 20px;
}

尝试将文件重命名为app.component.scss，它应该可以工作。

要将 SCSS 作为您的 Angular CLI 项目的默认设置，请在您的 .angular-cli.json 文件（在您的项目根目录中）中更新它：

{
    "defaults": {
        "styleExt": "scss",
    }
}

或者你可以使用ng set defaults.styleExt scss。