如何对sass内联变量#{$i}进行网页打包

我正在尝试类似的东西：

@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}

的正确网页配置是什么？

---

我试过PostSS loader和其他一些东西，但还没有线索。任何帮助都将不胜感激。谢谢

问题出在运行时编译过程中。与网页包或sass加载程序无关

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;
  }
});

上述措施奏效了