sass - sass インライン変数を webpack する方法 #{$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'
    }
  ])
}

#{$i}セレクター名に使用できる正しい webpack 構成は何でしょうか?

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