0

我一直在寻找这个我不断得到的神秘错误的答案，我真的不知道还能去哪里找。显然，有一个有问题的媒体查询选择器，但它似乎和我迄今为止发现的任何其他媒体查询示例一样正常。（另外，我对媒体查询不太擅长，真的，但我认为它们的格式很好）：

$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 代码似乎没问题。任何提示我应该在哪里看？谢谢你的帮助。

4

1 回答 1

1

如评论中所述，您需要indentedSyntax: true通过 sass-loader 选项传入node-sass才能编译indentedSyntax

例子

{
  test: /\.sass$/,
  loaders: ["style", "css?sourceMap", "postcss", "resolve-url",  
  {
    loader: "sass-loader",
    options: {
      sourceMap: true,
      indentedSyntax: true
    }
  }]
}
于 2017-04-15T08:30:52.113 回答