vue移动端实现px自动转换rem？

Love The Way You Lie 2023-02-25 15:24 7阅读 0赞

第一步安装

npm install lib-flexible px2rem-loader -S

第二步：在 main.js中引入 import ‘lib-flexible/flexible’

import 'lib-flexible/flexible'

第三步：修改build/utils.js如下

const px2remLoader = {
    	loader: 'px2rem-loader',
    	 options: {
    	   remUnit: 37.5
    	 }
    }
    function generateLoaders (loader, loaderOptions) {
        const loaders = options.usePostCSS ? [cssLoader, px2remLoader, postcssLoader] : [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)
        }
      }

最后npm run dev即可

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue移动端自动将px转换成rem

开发移动端的过程中，如何频繁的去计算rem和px之间的转换时一件非常麻烦的过程，接下来提供一个vue框架可以自动转换一、安装lib-flexible依赖 ...

Myth丶恋晨/ 2024年04月17日 22:24/ 0 赞/ 83 阅读

相关关于Vue 移动端适配（px2rem 插件将px转为rem)

、安装 npm install px2rem-loader lib-flexible --save 二、入口文件main.js加上 import ...

ゞ浴缸里的玫瑰/ 2024年04月17日 19:42/ 0 赞/ 84 阅读

相关前端 Vue中使用px2rem把px转换为rem

使用 Vue 做移动端页面时，适配是必须的，rem 不失为一种好的选择，可在不同屏幕上完美显示相同的布局px2rem 插件可以使`<style></style>`中的 px 单

淡淡的烟草味﹌/ 2023年09月24日 23:37/ 0 赞/ 75 阅读

相关 Vue项目 rem自动转换 px 为 rem，高保真还原设计图

Vue项目自动转换 px 为 rem，高保真还原设计图前端开发中还原设计图的重要性毋庸置疑，目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代

迈不过友情╰/ 2023年06月07日 12:24/ 0 赞/ 25 阅读

相关 vue移动端实现px自动转换rem？

第一步安装 npm install lib-flexible px2rem-loader -S 第二步：在 main.js中引入 import ‘lib-flexi

Love The Way You Lie/ 2023年02月25日 15:24/ 0 赞/ 8 阅读

相关 vue移动端适配 -- px2rem

vue移动端适配 -- px2rem 安装 npm install px2rem-loader lib-flexible --save 在main.js中引入 i

朱雀/ 2022年04月15日 00:48/ 0 赞/ 339 阅读

相关 px2rem-loader（Vue:将px转化为rem，适配移动端）

前提: 搭建vue项目框架: 全局安装 vue-cli $ npm install --global vue-cli 创建一个基于 webpack

偏执的太偏执、/ 2021年11月17日 12:34/ 0 赞/ 656 阅读

相关 px2rem-loader（Vue:将px转化为rem，适配移动端）

1：使用的是vue-cli+webpack，通过npm来安装的 npm i lib-flexible --save 2：在main.

我就是我/ 2021年10月19日 04:38/ 0 赞/ 430 阅读

相关关于Vue 移动端适配（px2rem 插件将px转为rem）

一、安装 npm install px2rem-loader lib-flexible --save 二、入口文件main.js加上 import 'l

小灰灰/ 2021年09月29日 14:16/ 0 赞/ 394 阅读

相关 Vue CLI3 移动端适配【px2rem 或 postcss-plugin-px2rem】

今天，我们使用Vue CLI3 做一个移动端适配。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

Bertha 。/ 2021年08月29日 00:27/ 0 赞/ 377 阅读