我是如何在webpack中使用postcss-px2rem的

經過一番折騰重要搞定了。

首先需要安裝postcss-plugin-px2rem。

npm install --save-dev postcss-plugin-px2rem

我的webpack工程中沒有webpack.config.js,倒是有webpack.base.config.js文件。從這個文件中得知 vue結尾文件引用vue-loader.config.js中的配置，如下便這個文件。

下面的第5、19-21行為自己添加。rootValue中的75為 1rem所對應的px；默認為100，我這里改為75。

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
var px2rem = require('postcss-plugin-px2rem');
module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  transformToRequire: {
    video: 'src',
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  },
    postcss: function () {
    return [px2rem({rootValue:75})];
  }
}

OK,生效