webpack 预处理器配置 postcss

在项目中使用了sass、less等预处理器,同时还使用了css样式提取ExtractTextPlugin，之后还想使用postcss是不是感觉开始懵逼了...

确实我也懵逼过，当然现在把这些记录下来，给那些还在懵逼的童鞋..

（注意：配置的webpack版本是1.15.0如果使用2.x版本的童鞋你有两种选择，1是看官方文档，2是继续懵逼..因为我知道有坑一直没升级）

• 安装相应loader(less-loader,sass-loader...postcss-loader)
• 配置postcss-loader(这步很重要,不要配错了位置)
  如果有使用了ExtractTextPlugincss提取插件：
  以sass为例，less类似

{
  test: /\.scss$/, 
  loader:  ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!sass-loader')
}

注意:postcss-loader的位置是在css-loader的后面，否则会影响sass-loader正常编译。

• 配置postcss相关处理插件
  这里我使用了两个，
  一个是postcss-px2rem
  另一个autoprefixer
  先npm，后require,最后配置postcss插件。

  module: {
    loaders: [
        ...
        {test: /\.scss$/, loader:  ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!sass-loader')}
    ]
  },
  postcss: function() {
        return [autoprefixer(),px2rem({remUnit: 50})];
  }
  

好了，搞起来！有疑问的留言一起交流。