一、安装px2rem-loader
npm install px2rem-loader
二、配置
build文件夹下utils.js，找到generateLoaders
修改如下配置
const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 75 //设计稿宽度/10}}// generate loader string to be used with extract text pluginfunction generateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,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)}}
三、重启项目
四、如果项目集成了less/sass,还需要做如下更改
const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 75 //设计稿宽度/10}}const lessLoader ={loader: 'less-loader'}// generate loader string to be used with extract text pluginfunction generateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader,lessLoader] : [cssLoader,px2remLoader,lessLoader]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)}}
