uni-app 将 uni_modules 目录下的全部 vue 文件的 css 代码一键 px 转为 rpx

在 uni-app 中，将 uni_modules 目录下的全部 Vue 文件中的 CSS 代码中的 px 转换为 rpx，可以通过编写一个 Node.js 脚本来实现。这个脚本会读取所有 Vue 文件，使用正则表达式匹配 CSS 样式中的 px 值，并将其转换为 rpx。

以下是一个简单的示例脚本，展示了如何完成这一任务：

const fs = require('fs');
const path = require('path');

// 定义需要处理的目录
const targetDir = path.join(__dirname, 'uni_modules');

// 递归读取目录中的所有文件
function readDirRecursive(dir) {
  const files = [];
  fs.readdirSync(dir).forEach(file => {
    const fullPath = path.join(dir, file);
    const stat = fs.statSync(fullPath);
    if (stat.isDirectory()) {
      files.push(...readDirRecursive(fullPath));
    } else if (fullPath.endsWith('.vue')) {
      files.push(fullPath);
    }
  });
  return files;
}

// 转换 px 为 rpx
function convertPxToRpx(content) {
  return content.replace(/([\d.]+)px/g, (match, p1) => `${parseFloat(p1) / 2}rpx`);
}

// 处理文件
function processFiles(files) {
  files.forEach(file => {
    const content = fs.readFileSync(file, 'utf8');
    const newContent = convertPxToRpx(content);
    fs.writeFileSync(file, newContent, 'utf8');
  });
}

// 主函数
function main() {
  const files = readDirRecursive(targetDir);
  processFiles(files);
  console.log('所有 Vue 文件中的 px 已转换为 rpx');
}

// 执行主函数
main();

解释

1. 读取目录：readDirRecursive 函数递归地读取目标目录中的所有文件，并返回所有 .vue 文件的路径。
2. 转换 px 为 rpx：convertPxToRpx 函数使用正则表达式匹配所有 px 值，并将其转换为 rpx。这里假设设计稿宽度为 750，因此 px 转为 rpx 的比例是 1px = 0.5rpx（即 px / 2）。
3. 处理文件：processFiles 函数读取每个 .vue 文件的内容，使用 convertPxToRpx 函数进行转换，然后将新内容写回文件。
4. 主函数：main 函数调用上述函数完成整个处理流程。

运行这个脚本后，uni_modules 目录及其子目录中的所有 .vue 文件中的 CSS px 值将被转换为 rpx。注意，这个脚本没有处理复杂的 CSS 嵌套或注释中的 px 值，但在大多数情况下应该足够使用。