如何 webpack sass 内联变量 #{$i}答案

【问题标题】：How to webpack sass inline variables #{$i}如何 webpack sass 内联变量 #{$i}
【发布时间】：2017-07-04 03:09:41
【问题描述】：

我正在尝试类似的东西：

@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} 作为选择器名称的正确 webpack 配置是什么？

我已经尝试过 postcss-loader 和其他一些东西，但还没有任何线索。任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： sass webpack css-loader sass-loader

【解决方案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;
  }
});

以上方法有效。

【讨论】：