我是如何在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中的配置，以下便這個文件。

下面的第五、19-21行爲本身添加。rootValue中的75爲 1rem所對應的px；默認爲100，我這裏改成75。

 1 'use strict'
 2 const utils = require('./utils')
 3 const config = require('../config')
 4 const isProduction = process.env.NODE_ENV === 'production'
 5 var px2rem = require('postcss-plugin-px2rem');
 6 module.exports = {
 7   loaders: utils.cssLoaders({
 8     sourceMap: isProduction
 9       ? config.build.productionSourceMap
10       : config.dev.cssSourceMap,
11     extract: isProduction
12   }),
13   transformToRequire: {
14     video: 'src',
15     source: 'src',
16     img: 'src',
17     image: 'xlink:href'
18   },
19     postcss: function () {
20     return [px2rem({rootValue:75})];
21   }
22 }

OK,生效