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解析不了插值導致報錯