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