webpack + sass-loader：“...-width: $small)”后的 CSS 无效：预期为“{”，为“;”答案

【问题标题】：webpack + sass-loader: Invalid CSS after "...-width: $small)": expected "{", was ";"webpack + sass-loader：“...-width: $small)”后的 CSS 无效：预期为“{”，为“;”
【发布时间】：2017-04-11 19:52:31
【问题描述】：

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

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

【问题讨论】：

小媒体查询是新媒体查询还是和中媒体查询一样？
@DenisTsoi、$small 和 $medium 是在媒体查询之前定义的 sass 变量。它们只存储一些像素。
我怀疑 node-sass（这是 sass-loader 的依赖项）正在使用 scss 来检查而不是 sass（我在 codepen 上检查了你的代码，一切似乎都很好）
你需要为 sass-loader webpack 传入选项：{ indentedSyntax: true }（node-sass 默认关闭）
Throoze - 这有帮助吗？

标签： css sass webpack sass-loader

【解决方案1】：

如 cmets 中所述，您需要通过 sass-loader 选项传入indentedSyntax: true，以便node-sass 与indentedSyntax 一起编译

示例

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

【讨论】：