Как WebPack дерзость строковые переменные # {$} я

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, чтобы иметь возможность использовать #{$i} для имен селекторов?

Я пробовал 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; 
    } 
}); 

Выше работал.