webpack + sass-loader： "...- width：$ small）"の後のCSSが無効です "：" {"、"; "

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"] 
    } 

このローダーの設定は、これまで私のためによく働いたので、私は問題があるとは思いません。

私はこの一連のルール（メディアクエリを持つもの）を削除しようとしましたが、残りの部分は大丈夫です。どのようなヒントが必要ですか？ご協力いただきありがとうございます。

Answer 1

コメントで述べたように、あなたはindentedSyntax

例

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