解决postcss-px-to-viewport 配置项 include 失效问题

# H5 项目精准配置 postcss-px-to-viewport 解决 include 失效问题（避坑指南）

问题现象

当你在 H5 项目中配置 postcss-px-to-viewport 时，发现：

1. include 配置的路径未生效
2. 预期外的文件被自动转换为 vw 单位
3. 多次检查正则表达式仍无法排除指定文件

注意：这不是你的代码问题！根本原因是 npm 官方源的版本存在兼容性问题。

终极解决方案

第一步：卸载问题依赖

# 根据你的包管理器选择
npm uninstall postcss-px-to-viewport
# 或
yarn remove postcss-px-to-viewport

第二步：安装修复版本

npm i https://github.com/evrone/postcss-px-to-viewport --save-dev
# 或
yarn add https://github.com/evrone/postcss-px-to-viewport --dev

原理说明：GitHub 仓库版本包含重要修复：

• 修复正则表达式匹配逻辑
• 增强 include/exclude 路径检测
• 优化 Webpack 构建链兼容性

使用postcss-px-to-viewport完整流程

1. 重点，下载正确资源

npm i https://github.com/evrone/postcss-px-to-viewport --save-dev

2. 官方给出的示例不生效，替换例如下面的两种写法（替换你的文件名），

include: [/H5/],

include: /\/H5\/mobile\//

3. 配置示例

• CommonJS导出方式

// postcss.config.cjs （CommonJS文件名 项目根目录）
module.exports = { 
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px',
      viewportWidth: 375,
      unitPrecision: 5,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [/inviteInterview/],
      include: [/H5/],
      landscape: false,
      landscapeUnit: 'vw',
      landscapeWidth: 1080
    }
  }
}

• ES模块化导出方式

// postcss.config.js （ES命名 项目根目录）
export default { 
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px',
      viewportWidth: 375,
      unitPrecision: 5,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [/inviteInterview/],
      include: [/H5/],
      landscape: false,
      landscapeUnit: 'vw',
      landscapeWidth: 1080
    }
  }
}

精准配置指南（避坑要点）

配置原则

1. 路径匹配优先级：include > exclude
2. 正则表达式必须全路径匹配
3. 使用绝对路径更可靠

路径匹配技巧（正则表达式）

场景描述	正确写法	错误写法
匹配 src/H5 目录	//src/H5//	/H5/
匹配 views/mobile 目录	//views/mobile//	/mobile/
匹配特定文件	//H5/index.vue$/	/index.vue/

版本对照表

版本来源	版本号	include 支持	推荐指数
npm 官方源	1.1.1	❌	⭐
GitHub 源码版	1.1.2+	✅	⭐⭐⭐⭐⭐