webpack 编译sass异常

现在前端大部分没有直接编辑css样式，而是通过使用第三方提供的编辑，提高开发效率，如sass与less，为了便捷会引入postcss来帮编译的样式自行加入相应的细节兼容浏览器，如下所示：

{ display: flex }

编译为

{
    display: webkit-box;
    display: webkit-flex;
    display: ms-flexbox;
    display: flex;
}

这样就可以方便开发

现在说sass与postcss一起使用的情况，在webpack中会用sass-loader与postcss来编译，顺便要写好，postcss一定要保证在sass之前，否则就只能兼容部分sass语法，且编译会报错，如 #{$}识别不了该词

$name: foo;
p.#{$name} { color: #ddd; }

编译报错， ERROR in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/postcss-loader/lib!./…../..scss

(…) Unknow word
$name: foo; p.#{$name} { color: #ddd; }

所以相应的webpack-module中的scss模块调整为如下:
{
test: /.scss$/,
use: [ ‘style-loader’, ‘css-loader’, ‘postcss-loader’, ‘sass-loader’ ]
}

(对应的webpack版本为3)