vite vue3 vant postcss-px-to-viewport-8-plugin
时间: 2023-09-23 12:02:19 浏览: 70
对不起,我之前给出的回答有点错误。在 Vite + Vue 3 + Vant 项目中配置 postcss-px-to-viewport-8-plugin 插件时,确实需要避免将 node_modules 目录排除在外。这是因为 vant 组件库在 node_modules 中,需要对其中的样式进行转换。
首先,你需要安装 postcss-px-to-viewport-8-plugin 插件:
```
npm install postcss-px-to-viewport-8-plugin --save-dev
```
接下来,在你的项目根目录下创建 `postcss.config.js` 文件,并进行如下配置:
```javascript
module.exports = {
plugins: {
'postcss-px-to-viewport-8-plugin': {
unitToConvert: 'px',
viewportWidth: 375, // 设计稿宽度
viewportHeight: 667, // 设计稿高度,可以不指定
unitPrecision: 8, // 转换后保留的小数位数
propList: ['*'], // 需要进行转换的属性列表,* 表示全部属性
viewportUnit: 'vw', // 转换后的单位
fontViewportUnit: 'vw', // 字体转换后的单位
selectorBlackList: [], // 需要忽略的选择器列表
minPixelValue: 1, // 最小的转换数值
mediaQuery: false, // 是否转换媒体查询中的像素值
replace: true, // 是否直接更换属性值而不添加备用属性
exclude: [/node_modules/], // 忽略的文件列表
},
},
};
```
这样,postcss-px-to-viewport-8-plugin 插件就配置完成了。在你的样式文件中使用 px 单位时,插件会自动将其转换为 vw 单位。
希望对你有帮助!如果你还有其他问题,请随时提问。