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'
    }
  ])
}

能够将#{$i}用于选择器名称的正确webpack配置是什么？

我已经尝试了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;
  }
});

以上工作。

如何webpack sass内联变量＃{$ i}

1 个答案: