如何一次性下载WordPress中包含@import子文件的合并版style.css？

当然有办法！我给你提供几个实用的方案，不用手动复制粘贴就能一键合并主文件和所有@import关联的子CSS文件：

方法一：浏览器控制台一键生成（最快捷） #

直接在浏览器控制台运行这段JS代码，它会自动递归抓取所有@import的文件，合并后自动下载成单文件：

async function fetchAndMergeCSS(url) {
  let cssContent = await fetch(url).then(res => res.text());
  // 匹配所有@import语句（支持带/不带url()、带媒体查询的写法）
  const importRegex = /@import\s+(?:url\()?["']([^"')]+)["'](?:\))?(?:\s+([^;]+))?;/g;
  let match;
  // 逐个替换@import为对应子文件的CSS内容
  while ((match = importRegex.exec(cssContent)) !== null) {
    // 把相对路径转为绝对URL，避免路径错误
    const importUrl = new URL(match[1], url).href;
    // 递归抓取子文件的内容
    const importedCSS = await fetchAndMergeCSS(importUrl);
    // 如果有媒体查询，就把子内容包裹在媒体查询里，否则直接替换
    const finalContent = match[2] ? `@media ${match[2]} { ${importedCSS} }` : importedCSS;
    cssContent = cssContent.replace(match[0], finalContent);
  }
  return cssContent;
}

// 自动获取页面中的主style.css链接（如果没匹配到，手动替换成你的style.css绝对URL）
const mainCSSUrl = document.querySelector('link[rel="stylesheet"][href*="style.css"]')?.href || 'https://你的网站地址/wp-content/themes/你的主题/style.css';

// 执行合并并触发下载
fetchAndMergeCSS(mainCSSUrl).then(mergedCSS => {
  const blob = new Blob([mergedCSS], { type: 'text/css' });
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = 'merged-style.css';
  downloadLink.click();
  console.log('合并后的CSS内容：\n', mergedCSS);
});

注意事项： #

• 跨域问题：如果是线上网站，浏览器可能因CORS限制无法抓取其他域名的CSS文件。解决办法：
  • 本地开发环境（localhost）完全不受限；
  • 线上测试可以用Chrome带--disable-web-security参数启动（仅限临时测试）；
  • 或者把主CSS文件下载到本地，用下面的Node.js方法处理。

方法二：本地Node.js脚本（适合开发/批量处理） #

如果需要频繁合并，或者遇到跨域问题，用Node.js脚本更稳定可靠：

1. 进入你的WordPress主题目录，初始化npm（若未初始化）：

npm init -y

2. 安装依赖：

npm install postcss postcss-import --save-dev

3. 创建merge-css.js文件，内容如下：

const fs = require('fs').promises;
const postcss = require('postcss');
const postcssImport = require('postcss-import');

async function mergeCSS() {
  try {
    // 读取主style.css文件
    const cssContent = await fs.readFile('./style.css', 'utf8');
    // 用postcss-import自动解析所有@import依赖
    const result = await postcss([postcssImport()]).process(cssContent, { from: './style.css' });
    // 写入合并后的文件
    await fs.writeFile('./merged-style.css', result.css);
    console.log('CSS合并完成！文件已保存为merged-style.css');
  } catch (err) {
    console.error('合并失败：', err);
  }
}

mergeCSS();

4. 运行脚本即可生成合并文件：

node merge-css.js

这个方法会完美处理相对路径、媒体查询等复杂情况，全程本地运行，没有跨域风险。

方法三：在线CSS合并工具（适合临时需求） #

找支持解析@import的在线CSS合并工具，输入你的主style.css完整URL（比如https://你的网站/wp-content/themes/xxx/style.css），工具会自动抓取所有关联子文件并合并成单文件。注意选择正规工具，避免泄露敏感样式代码。

内容的提问来源于stack exchange，提问作者Number Nine