Comment variables inline webpack SASS # {$ i}

Question

J'essaie quelque chose comme:

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

Je reçois l'erreur suivante:

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

Et voici l'extrait pertinent de mon 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' 
    } 
    ]) 
} 

Que serait-il la configuration webpack correcte pour pouvoir utiliser #{$i} pour les noms des sélecteurs?

J'ai essayé postcss-loader et d'autres choses, mais aucune idée pour le moment. Toute aide sera très très appréciée. Merci!

Answer 1

Le problème était dans le processus de compilation d'exécution. Rien à voir avec webpack ou 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; 
    } 
}); 

Ce qui précède a fonctionné.