当前位置: 首页 > Web前端 > vue.js

vue移动端 px2rem-loader与vux移动端组件库样式错乱,应该使用postcss-plugin-px2rem完美解决

时间:2023-03-31 22:49:15 vue.js

vue移动端px2rem-loader和vux移动端组件库风格比较乱。应该使用postcss-plugin-px2rem可以完美解决。plugin-px2rem1,首先npm安装postcss-plugin-px2rem插件npmipostcss-plugin-px2rem--save-dev2,在src={"plugins":{"postcss-import":{},"postcss-url":{},//编辑目标浏览器:使用package.json中的"browserslist"字段"autoprefixer":{}}}然后重启npmrundev,打开控制台看代码中的px已经转为rem注意:1.该方法只能将.vue文件的style标签中的px转为rem,不能将script标签和elementstyle中定义的px转为rem2.如果在.vue文件的style中的某行代码不想转为rem,在后面写注释/no/即可。问题:为什么要忽略node_modules目录下的文件?答:有时候我们在做移动项目的时候需要导入第三方的UI库,比如VUX、MINT等,这时候你会发现第三方的组件样式变小了。较小的主要原因是第三个库CSS在使用data-dpr="1"时基于硬编码大小。当引入我们使用的flexible时,data-dpr不是硬编码的,而是动态的,这就导致了这个问题。这里我们不再修改第三方UI风格,直接忽略,简单直接实用。