vue-cli3 中postcss-px2rem影响ui组件样式的解决方案

最新推荐文章于 2025-07-09 14:02:36 发布

阿昆墨墨

最新推荐文章于 2025-07-09 14:02:36 发布

阅读量8.9k

点赞数

CC 4.0 BY-SA版权

文章标签： vue-cli3

本文链接：https://blog.youkuaiyun.com/weixin_39944458/article/details/84633110

本文解决了在使用postcss-px2rem后，Vant组件库样式变小的问题。原因是该依赖将px单位错误地转换为rem，而Vant已进行适配。解决方案是卸载该依赖，安装postcss-px2rem-exclude并调整package.json配置。

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

问题：引入postcss-px2rem依赖后，vant组件库的样式变的很小

原因：依赖会把组件中px自动转换为rem，而实际组件自身已经做过适配，画蛇添足了

解决：把postcss-px2rem依赖卸掉，安装依赖postcss-px2rem-exclude，并修改配置文件package.json

    "postcss": {
        "plugins": {
          "autoprefixer": {},
          "postcss-px2rem-exclude":{
              "remUnit": 75,
              "exclude":"/node_modules/i"
          }
        }
      }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿昆墨墨

关注关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用px2rem不生效

全网同名：PBitW！可以去掘金关注我！

07-22

4043

webpack配置正确的配置，兼容现在的vuecli 下载的包使用问题 1、不兼容 scss 解决办法 2、大写、style里面不会被解析 3、prettier 保持大写 lib-flexible 1、兼容pad 2、配合媒体查询 --》避免 pc 端字太大

vue-cli3移动端适配postcss-px2rem

77的博客

12-04

1262

1.public/index.html中增加： <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 2.修改页面font-size: 以往都是用js监听页面宽度来动态计算设置根元素font-size 现在有了v...

3 条评论您还未登录，请先登录后发表或查看评论

vue中移动端使用postcss-px2rem与ui组件冲突问题

Kerwin_yue的博客

03-14

6168

在vue移动开发中，使用px2rem-loader，会自动将px单位换算成rem，但是存在一个问题，会将第三方UI库的px单位转为rem。

实现响应式Web设计：postcss-px2rem的自适应布局

最新发布

weixin_34438187的博客

07-09

866

在前端开发中，CSS 单位的选择对于页面的布局有着重要的影响。传统的像素单位 px 是固定的，而 rem（root em）是相对于根元素（通常是 html 元素）的字体大小进行计算的。了解 px 和 rem 的区别，并根据场景选择合适的单位，是构建灵活、可适应不同屏幕尺寸的网站的关键。随着前端开发的不断发展，对于网页布局的要求越来越高，尤其是需要在不同设备上拥有良好的显示效果。传统的CSS布局单位以像素（px）为主，但px单位无法很好地适应不同屏幕尺寸和分辨率的设备。

vue-cli3.x 移动端适配（使用postcss-px2rem 忽略指定文件不影响ui组件样式的解决方案）——亲测有效！！！

qq_35696889的博客

06-22

3911

在网上找了好久，提供的教程都不太实用。因为3.x 把配置文件集成至 package.json 中，所以我们的配置信息需要在package.json进行配置。就这一点，我都找了好久。（我太菜了o(╥﹏╥)o） cd 当前文件夹 npm install lib-flexible --save npm install postcss-pxtorem --save 在 package.json 结尾中添加如下代码 "postcss": { "plugins": { "autoprefixer": {},

vue3.0 依赖 postcss-px2rem-exclude 插件做自适应

weixin_46174785的博客

04-28

1385

效果图 1、下载依赖 cnpm install postcss-px2rem px2rem-loader --svae 2、在utils 文件下新建一个rem.js 文件 // 基准大小 const baseSize = 14 // 设置 rem 函数 function setRem() { // 当前页面宽度相对于1440宽的缩放比例，基准宽度可根据自己ui设计图修改。 const scale = document.documentElement.clientWidth / 1

vue-cli使用px2rem 或 postcss-plugin-px2rem px转换rem

weixin_57156917的博客

07-20

1035

1.安装插件（1）安装px2rem-loader(devDependencies) npm install px2rem-loader --save-dev （2）移动端适配解决npm包 "lib-flexible" (dependencies) npm install lib-flexible --save （3）main.js中引入 "lib-flexible" import 'lib-flexible' // 移动端适配 (目录: hello-world/src/main.js) 2

基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem

hjh15827475896的博客

10-31

682

基于vue-cli3的vue项目移动端样式适配，lib-flexible和postcss-px2rem 1，安装 flexible和 postcss-px2rem（命令行安装） npm install lib-flexible --save npm install postcss-px2rem --save 简要介绍这两个包的用途： flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maximum-scal

vue-cli 3.0 搭建vue 2.0中使用postcss-pxtorem适配方案

E_m_m_a的博客

08-09

640

提示：用vue-cli 3.0搭建的vue 2.0项目中使用prostcss prostcss-pxtorem px转rem 使用vant 文章目录一、安装二、创建postcss.config.js三、创建rem.js四、在main.js中引入rem.js 一、安装 npm install postcss-pxtorem --save 二、创建postcss.config.js 在根目录新建postcss.config.js文件，内容如下 module.exports = { plugins:

vue-cli3结合vant与postcss-px2rem的移动端开发实战

"本文档详述了如何使用vue-cli3、 vant UI组件库以及postcss-px2rem来构建和适配移动端页面的过程。" 在移动端应用开发中，选择合适的框架和技术栈至关重要。本示例选择了`vue-cli3`作为项目脚手架，它提供了快速...

postcss-pxtorem

热门推荐

weixin_51629637的博客

05-09

1万+

vant配置：postcss-pxtorem以及解决 “Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”问题 1.npm安装 npm install postcss-pxtorem --save 2.utils文件夹下（没有就新建一个）,新建一个rem.js copy以下代码： const baseSize = 37.5 //跟postcss.config.js中rootValue的值是一致的 // 设置 rem 函数 function

vue-cli3 + vant + postcss-px2rem-exclude 实现移动端页面

qq_36571836的博客

07-19

382

https://www.jianshu.com/p/01c2aa03409d px自动转成 rem的插件而且还可以排除第三方ui库的转换 1: npm i postcss-px2rem-exclude -S 2：在项目根目录（src）下，新建 postcss.config.js 文件： ```handlebars module.exports = { "plugins": { "autoprefixer": {}, "postcss-px2rem-exclud

postcss-pxtorem设置不转换UI框架的CSS单位

一捆铁树枝的博客

12-14

4399

在移动端项目中使用postcss-pxtorem做适配，同时也使用到了第三方UI库（vant）。这时就出现了一个问题。第三方UI库使用的是px,而postcss将页面中的px 全部转化成了rem.导致样式缩小。查询postcss配置文档后发现其提供了selectorBlackList 属性来忽略掉某些选择器，vant-UI组件库的CSS都是以.van开头的因此我只需要将 .van 忽略掉就好，具体配置如下： module.exports = { plugins: { // 这个工具可.

vue-cli 使用postcss-px2rem导致vue组件引入css失败

阿之阿佐

05-20

5757

postcss-px2rem插件配置不当引起的；在vue-loader.config.js增加了两个配置'use strict' const utils = require('./utils') const config = require('../config') const isProduction = process.env.NODE_ENV === 'production' const s...

H5适配手机端的依赖postcss-px2rem-exclude，可解决导致第三方组件样式变小的问题

HelloWorldLJY的博客

06-17

1889

问题：引入postcss-px2rem依赖后，第三方组件库的样式变的很小原因：依赖会把组件中px自动转换为rem，而实际组件自身已经做过适配，画蛇添足了解决：把postcss-px2rem依赖卸掉，安装依赖postcss-px2rem-exclude，根目录下创建postcss.config.js module.exports = { plugins: { autoprefixer: {}, "postcss-px2rem-exclude": { remUnit: 1,/

postcss-pxrem和vant - ui组件库冲突页面变小

YangWenYu_lala的博客

03-01

897

vue移动开发中，使用postcss-px2vw插件它会自动将px单位换算成rem，这样不用计算很方便，但同时也存在一些问题，如果我们需要使用ui组件库内容，它会将被引入组件的px转换为rem 面向百度编程果然没错 const pxtorem = require('postcss-pxtorem') const autoprefixer = require('autoprefixer') module.exports = ({ file }) => { let rootValue

vue项目实现页面自适应通过lib-flexible插件+postcss-px2rem-exclude

BiuBiu_Ka

12-15

1414

lib-flexible postcss-px2rem-exclude 淘宝也是采用这用自适应 lib-flexible：会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem,那么这就有点麻烦了，我他么还

postcss-px2rem vantjs 样式大小显示问题

Young_Gao的博客

06-25

6841

当postcss-px2rem 的 rootValue 设置为 75 或者 37.5 的时候，会发现整个都显得特别小解决办法，postcss.config.js 中如下配置 const AutoPrefixer = require("autoprefixer"); const px2rem = require("postcss-pxtorem"); module.exports =...