どのようにWebPACKのSASSインライン変数＃{$ I}

Question

私のような何かをしようとしている：

@for $i from 0 through 5 { 
    .foo-#{$i} { 
     padding-left: 16px * $i; 
    } 
} 

私は次のエラーを取得：

CssSyntaxError: app/styles.scss:41:11: 
Unknown word You tried to parse SCSS with the standard CSS parser; 
try again with the postcss-scss parser 

    39 |  
    40 |  @for $i from 0 through 5 { 
> 41 |   .foo-#{$i} { 
    |    ^ 
    42 |    padding-left: 16px * $i; 
    43 |   } 

そして、これが私のWebPACKから関連の抜粋です.config.js：

{ 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    use: ExtractTextPlugin.extract([ 
    { 
     loader: 'css-loader', 
     options: { 
     modules: true, 
     localIdentName: '[local]--[hash:base64:6]' 
     } 
    }, 
    { 
     loader: 'sass-loader' 
    } 
    ]) 
} 

使用できるように、正しいWebPACKの構成何だろうセレクタ名の場合は？

私はpostcss-loaderと他の何かを試しましたが、まだ手掛かりはありません。どんな助けも非常に高く評価されます。ありがとう！

Answer 1

問題は実行時のコンパイルプロセスにありました。 webpackやsass-loaderとは関係ありません。

require('css-modules-require-hook')({ 
    generateScopedName: '[local]--[hash:base64:6]', 
    extensions: ['.scss'], 
    preprocessCss: function (data, filename) { 
    var result = sass.renderSync({ 
     data: data, 
     file: filename 
    }).css; 

    return result; 
    } 
}); 

上記は機能しました。