Rollup/Vite插件开发：如何添加文件至编译流程供其他插件处理？

你当前的问题在于使用emitFile输出asset类型文件时，这类文件会被Rollup/Vite当作静态资源直接输出，不会进入模块解析和转换流程，所以后续Vite CSS插件的transform钩子无法处理它们。这不是emitFile的误用，只是它的适用场景和你的需求不匹配。

要让未引用的CSS进入完整编译流程，有两种更合适的方式：

方式一：将CSS作为入口模块添加 #

直接把需要处理的CSS文件加入Rollup/Vite的入口列表，它们会被当作普通模块参与编译：

export function myPlugin() {
  return {
    name: 'my-plugin',
    enforce: 'pre',
    async buildStart(opts) {
      // 假设已获取需要添加的CSS文件路径列表
      const extraCssFiles = ['path/to/unused1.css', 'path/to/unused2.css'];
      // 将CSS文件追加为额外入口
      opts.input = [...Object.values(opts.input), ...extraCssFiles];
    }
  } 
}

这种方式最简单，Rollup/Vite会自动解析这些CSS文件，触发后续所有相关转换钩子。

方式二：创建虚拟模块并引用 #

如果不想修改入口列表，可以生成虚拟模块，在其中导入目标CSS，再将虚拟模块添加为入口：

export function myPlugin() {
  return {
    name: 'my-plugin',
    enforce: 'pre',
    async buildStart(opts) {
      const extraCssFiles = ['path/to/unused1.css', 'path/to/unused2.css'];
      // 将虚拟模块添加为入口
      opts.input = [...Object.values(opts.input), 'virtual:extra-css'];
    },
    // 解析虚拟模块ID
    resolveId(id) {
      if (id === 'virtual:extra-css') {
        return '\0' + id; // 用null字符标记虚拟模块，避免与真实文件冲突
      }
    },
    // 加载虚拟模块内容
    load(id) {
      if (id === '\0virtual:extra-css') {
        const extraCssFiles = ['path/to/unused1.css', 'path/to/unused2.css'];
        // 生成导入所有目标CSS的代码
        return extraCssFiles.map(file => `import '${file}';`).join('\n');
      }
    }
  } 
}

虚拟模块会被当作普通入口处理，其导入的CSS文件会进入完整编译流程，适合动态生成依赖的场景。

补充注意事项 #

• 若使用相对路径，需确保CSS文件路径正确，或通过resolveId钩子处理路径解析。
• 保持插件enforce: 'pre'的优先级，确保你的插件在CSS处理插件之前执行，让添加的模块能被后续插件捕获。

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