Question

我一直在寻找一些我不断得到的神秘错误的答案，而且我真的不知道在哪里可以看。显然，有一个违规的媒体查询选择器，但它似乎正如我迄今为止找到的任何其他媒体查询示例一样正常。（另外，我对媒体查询不是很好，真的，但我认为它们已经很好了）：

$small: 480px
$medium: 786px
$large: 1140px


@media only screen and (min-width: $small)

@media only screen and (min-width: $medium)
    .some-selector
        border: 1px solid #dedede
        border-radius: 6px
        bottom: 10px
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2)
        height: 500px
        position: absolute
        right: 10px
        width: 320px
         .
         .
         .

我得到的错误是：

Module build failed: 
@media only screen and (min-width: $small)
                                        ^
      Invalid CSS after "...-width: $small)": expected "{", was ";"
      in /path/to/mediaqueries.sass (line 6, column 42)

当我使用webpack进行转换时，使用许多加载器的堆栈来处理样式表时出现此错误。用于处理.sass文件的webpack配置是：

{
      test: /\.sass$/,
      loaders: ["style", "css?sourceMap", "postcss", "resolve-url",  "sass?sourceMap"]
    }

到目前为止，这个加载器设置对我来说效果很好，所以我认为问题不存在。

我尝试删除这组规则（带有媒体查询的规则），其余的sass代码似乎没问题。任何暗示我应该在哪里看？谢谢你的帮助。

Answer 1

如评论中所述，您需要通过sass-loader选项传递indentedSyntax: true，以便node-sass使用indentedSyntax进行编译

示例

{ test: /\.sass$/, loaders: ["style", "css?sourceMap", "postcss", "resolve-url", { loader: "sass-loader", options: { sourceMap: true, indentedSyntax: true } }] }

webpack + sass-loader：“...- width：$ small）”之后的CSS无效：期望“{”，是“;”

1 个答案: