首页 > 编程学习 > vue集成px2rem

vue集成px2rem

发布时间:2022/12/7 17:56:35

一、安装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)}}

 



 


本文链接:https://www.ngui.cc/zz/1544813.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000