Vue中 PX转换为REM

最新推荐文章于 2025-05-26 08:21:02 发布

脆脆鲨_HCC

最新推荐文章于 2025-05-26 08:21:02 发布

阅读量259

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/qq_40067662/article/details/107863334

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何通过安装并配置px2rem插件和lib-flexible库，实现项目中单位从px到rem的自动转换，从而达到响应式布局的目的。主要步骤包括：安装所需插件、在main.js中引入lib-flexible、修改utils.js中的generateLoaders方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装px2rem插件

npm install px2rem-loader  lib-flexible --save

2.在main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

3.在build下的 utils.js中，找到generateLoaders 方法，在这里添加代码。

// 新增代码
const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 37.5
  }
}

function generateLoaders (loader, loaderOptions) {
  const loaders = [cssLoader, px2remLoader]    // 修改这里
  if (loader) {
    loaders.push({
      loader: loader + '-loader',
      options: Object.assign({}, loaderOptions, {
        sourceMap: options.sourceMap
      })
   })
}