vite怎么配置postcss-pxtorem

Vite是一款轻便快捷的构建工具，我们可以方便地集成postcss-pxtorem插件来实现自适应布局。

首先，我们需要使用npm或yarn安装postcss-pxtorem和postcss-loader两个依赖项。

npm install postcss-pxtorem postcss-loader -D

yarn add postcss-pxtorem postcss-loader -D

然后，在vite.config.js文件中添加postcss配置。

//vite.config.js
const { createVuePlugin } = require('vite-plugin-vue2');
const { resolve } = require('path');

export default {
  plugins: [createVuePlugin()],
  css: {
    postcss: {
      plugins: [
        require('postcss-pxtorem')({
          rootValue: 16,
          propList: ['*', '!font*'],
          selectorBlackList: ['html'],
        }),
      ],
    },
  },
};

其中，rootValue是转换基准值，propList是需要转换的属性列表，selectorBlackList是选择器黑名单，防止出现转换单位的情况。

最后，我们只需要在CSS中使用rem单位编写样式即可。

/* 在750px宽度的设计稿下，1rem等于16px */
h1 {
  font-size: 2rem; /* 相当于32px */
}

p {
  font-size: 1rem; /* 相当于16px */
  padding: 20px; /* 不作转换 */
}

以上就是如何在Vite中配置postcss-pxtorem插件的方法。