如何使用PostCSS内联@import url()引用的远程字体？现有配置未生效

核心问题：插件顺序错误 #

你当前的PostCSS插件顺序搞反了——postcss-url放在了postcss-import前面，导致postcss-url运行时，@import的远程CSS还没被导入，自然看不到里面的字体资源URL，无法执行内联操作。

修正后的PostCSS配置 #

调整插件顺序，并补充必要的配置项，确保能拉取远程CSS并内联字体：

module.exports = {
  plugins: {
    "postcss-import": {
      // 允许解析远程HTTPS的@import地址
      resolve(id) {
        if (id.startsWith('https://')) {
          return Promise.resolve(id);
        }
        return require('postcss-import-resolver')(id);
      }
    },
    "postcss-url": {
      url: "inline",
      // 仅匹配字体文件类型
      filter: /\.(woff2|woff|ttf|eot|svg)$/i,
      // 将字体编码为base64内联
      encodeType: 'base64'
    },
    "tailwindcss/nesting": "postcss-nested",
    "tailwindcss": {},
    "autoprefixer": {},
  },
};

关键说明 #

1. 插件顺序：postcss-import必须最先执行，它会把所有@import的远程CSS拉取并合并到主CSS文件中，让postcss-url能捕获到字体的URL。
2. postcss-import配置：通过resolve函数明确允许解析远程HTTPS地址，确保不会跳过远程导入。
3. postcss-url配置：用filter限定只处理字体文件，避免内联其他无关资源；url: "inline"指定将字体转为base64嵌入CSS。

备选方案（应对CDN防盗链） #

如果遇到Google Fonts这类带防盗链的CDN，直接通过postcss-import拉取可能失败，可手动处理：

• 访问每个@import的URL，下载对应的CSS文件。
• 从CSS文件里提取字体资源URL，手动下载字体文件到本地项目（比如assets/fonts目录）。
• 修改主CSS的@import指向本地的CSS文件，再用上述PostCSS配置处理即可。

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