Wie webpack sass Inline-Variablen # {$ i}

Question

Ich versuche, so etwas wie:

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

bekomme ich folgende Fehlermeldung:

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

und das ist der relevante Auszug aus meinem 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' 
    } 
    ]) 
} 

Was würde es die richtige webpack Konfiguration in der Lage seinzu verwendenfür Selektornamen?

Ich habe postcss-loader und einige andere Dinge versucht, aber noch keine Ahnung. Jede Hilfe wird sehr sehr geschätzt. Vielen Dank!

Answer 1

Das Problem war im Laufzeitkompilierungsprozess. Nichts mit dem Webpack oder Sass-Loader zu tun.

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

Das obige funktionierte.