为什么我在 sass 有无效的 css？答案

【问题标题】：Why i have invalid css at sass?为什么我在 sass 有无效的 css？
【发布时间】：2019-07-29 10:31:54
【问题描述】：

所以我有这个 sass 文件：

.Row
    display: flex
    .Field
        width: 100%
        margin-right: 16px
        margin-bottom: 16px

当我想为嵌套的 .Field 属性添加 min-width: 180px 时出现此错误：

Failed to compile.

./src/styles/main.sass (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/styles/main.sass)
    .Field
              ^
      Invalid CSS after "    .Field {} }": expected 1 selector or at-rule, was "{"
      in /Users/isee/Work/Web/Projects/cardbox/src/styles/main.sass (line 61, column 16)

为什么？如果我尝试添加新行：

.Row
    .Field
        min-width: 180px

在代码上面一切正常。

Node-sass 4.12.0，与 react 16.8.4 一起使用

【问题讨论】：

您能否准确分享一下当您在编译时遇到错误时的外观？因为我试过了，你的尝试似乎一切都很好。

标签： reactjs sass node-sass

【解决方案1】：

 Invalid CSS after "    .Field {} }": expected 1 selector or at-rule, was "{"

所以首先你需要添加 { }

.Row {
    display: flex
    .Field {
        width: 100%
        margin-right: 16px
        margin-bottom: 16px } 
}

【讨论】：

不，Sass 可以在没有大括号的情况下工作。一定有别的事情发生。另请参阅我尝试重现 OP 的问题 on Codepen。
Sass 可以使用我们的花括号和分号。

【解决方案2】：

您需要添加 {} 和 ';' ，如下所示

.Row{
display: flex;
.Field{
    width: 100%;
    margin-right: 16px;
    margin-bottom: 16px;}}

【讨论】：

Sass 可以使用我们的花括号和分号。