vue项目使用webpack loader把px转换为rem

下载lib-flexible

https://github.com/amfe/lib-flexible

npm i lib-flexible --save

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

安装px2rem-loader

https://github.com/songsiqi/px2rem 配置px2rem-loader 在build文件中找到util.js，添加px2rem-loader到cssLoaders中

  const px2remLoader = {
 loader: 'px2rem-loader',  options: {  remUnit: 75 } } 

更改generateLoaders函数

  function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader, px2remLoader,postcssLoader] //添加px2remLoader if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } } 

完成之后重启

npm run dev