在項(xiàng)目中使用了sass、less等預(yù)處理器,同時還使用了css樣式提取ExtractTextPlugin，之后還想使用postcss是不是感覺開始懵逼了...

確實(shí)我也懵逼過，當(dāng)然現(xiàn)在把這些記錄下來，給那些還在懵逼的童鞋..

（注意：配置的webpack版本是1.15.0如果使用2.x版本的童鞋你有兩種選擇，1是看官方文檔，2是繼續(xù)懵逼..因?yàn)槲抑烙锌右恢睕]升級）

• 安裝相應(yīng)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相關(guān)處理插件
  這里我使用了兩個，
  一個是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})];
  }
  

好了，搞起來！有疑問的留言一起交流。