How to webpack sass inline variables #{$i}

Question

I'm trying something like:

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

I get the following error:

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

And this is the relevant excerpt from my 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'
    }
  ])
}

What would it be the correct webpack configuration to be able to use #{$i} for selector names?

I've tried postcss-loader and some other things, but no clue yet. Any help will be very very appreciated. Thanks!

score 0 · Accepted Answer · answered Feb 15 '17 at 15:58

The problem was in runtime compilation process. Nothing to do with webpack or 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;
  }
});

The above worked.

How to webpack sass inline variables #{$i}

1 Answers1