webpack 插值拼接选择器名报错

$channel_rule_nums: 3;
$channel_rule_height: (902, 958, 672);
@for $i from 1 through $channel_rule_nums {
  .channel_#{$i} {
    height: pxToRem(nth($channel_rule_height, $i));
    background-image: imgPath("rule/channel_#{$i}.png");
  }
}

如上webpack打包时.channel_#{$i} 处会报错，webpack loader配置问题，sass-loader在postcss-loader之前造成的，sass-loader需要在最后，否则postcss解析不了插值导致报错