Vite构建时PostCSS字体路径报错问题求助

问题原因 #

你的Vite配置中，build.rollupOptions.output.assetFileNames的处理逻辑存在问题：当处理非style.css的资源时，直接返回了assetInfo.name，而这个值对于字体文件来说是完整的绝对路径，违反了Rollup对资源文件名的要求（必须是无绝对/相对路径的字符串，或仅包含相对目录的路径），导致PostCSS抛出错误。

解决方案 #

修改vite.config.js中的assetFileNames配置，不要直接返回assetInfo.name，而是对资源文件名做合理处理，以下提供两种可行方案：

方案1：提取纯文件名并按类型存放 #

import path from 'path';

// ... 其他配置
build: {
  // ... 其他build配置
  rollupOptions: {
    output: {
      assetFileNames: (assetInfo) => {
        if (assetInfo.name === 'style.css') {
          return 'fds-aware.css';
        }
        // 提取文件名，去除绝对路径
        const fileName = path.basename(assetInfo.name);
        // 将字体文件统一放到assets/fonts目录
        if (/ttf|otf|woff|woff2/.test(fileName)) {
          return `assets/fonts/${fileName}`;
        }
        // 其他资源统一放到assets目录
        return `assets/${fileName}`;
      },
    },
  },
}

方案2：按资源类型自动分类（更通用） #

import path from 'path';

// ... 其他配置
build: {
  // ... 其他build配置
  rollupOptions: {
    output: {
      assetFileNames: (assetInfo) => {
        if (assetInfo.name === 'style.css') {
          return 'fds-aware.css';
        }
        // 根据后缀判断资源类型
        const ext = assetInfo.name.split('.').pop();
        let assetType = 'other';
        if (/ttf|otf|woff|woff2/.test(ext)) {
          assetType = 'fonts';
        } else if (/png|jpe?g|svg|gif|webp/.test(ext)) {
          assetType = 'images';
        } else if (/css/.test(ext)) {
          assetType = 'css';
        }
        // 保留原文件名和后缀，按类型归类
        return `assets/${assetType}/[name][extname]`;
      },
    },
  },
}

额外说明 #

• 你CSS中用相对路径引用字体的方式是符合Vite要求的，Vite会自动处理这些路径，将资源复制到输出目录并替换为正确的引用路径，不需要额外配置PostCSS插件处理字体路径。
• 检查postcss.config.js，autoprefixer仅负责添加CSS前缀，和字体路径处理无关，无需针对字体调整该插件配置。

内容的提问来源于stack exchange，提问作者Christopher Vradis