关于postcss-pxrem和vant - ui组件库冲突页面变小的问题

最新推荐文章于 2025-01-15 09:49:45 发布

原创最新推荐文章于 2025-01-15 09:49:45 发布 · 3.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在Vue移动端项目中，使用postcss-px2vw进行px转rem自动化处理带来便利，但也导致引入的UI组件库样式受到影响。本文介绍了这一问题及其解决方法，通过配置postcss.config.js文件，实现组件库与postcss并行工作，避免样式冲突。

vue移动开发中，使用postcss-px2vw插件它会自动将px单位换算成rem，这样不用计算很方便，但同时也存在一些问题，如果我们需要使用ui组件库内容，它会将被引入组件的px转换为rem，最后影响样式。这个问题浪费了很长时间，在这总结一下以免忘了。。。

安装

npm install postcss-pxtorem --save

在postcss.config.js中写入：

const pxtorem = require('postcss-pxtorem')
const autoprefixer = require('autoprefixer')

module.exports = ({ file }) => {
  let rootValue
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    rootValue = 16
  } else {
    rootValue = 37.5
  }
  return {
    plugins: [
      autoprefixer(),
      pxtorem({
        rootValue: rootValue,
        propList: ['*'],
        minPixelValue: 2
      })
    ]
  }
}