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

首先需要安裝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。

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,生效

轉載于:https://www.cnblogs.com/wsy6566/p/7724582.html

總結

以上是生活随笔為你收集整理的我是如何在webpack中使用postcss-px2rem的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。