怎样的WebPack青菜内嵌变量＃{$ I}

我想是这样的：

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

那会是正确的WebPack配置能够使用#{$i}选择器名称？

我试过postcss-loader和其他一些东西，但没有线索呢。任何帮助将非常感激。谢谢！

来源

2017-02-15 leeodelion

问题出在运行时编译过程中。与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; 
    } 
});

上面的工作。

来源

2017-02-15 15:58:59 leeodelion

怎样的WebPack青菜内嵌变量＃{$ I}

回答

相关问题