如何配置Vite，使Accept为*/*时返回纯CSS响应？

这是因为Vite在开发模式下，默认会将CSS文件封装为JS模块（注入热更新逻辑）。当请求头的Accept包含text/css时，Vite会识别出需要返回原始CSS内容；但如果Accept是*/*，Vite会优先返回处理后的JS模块。

你可以通过以下两种方式配置Vite来解决这个问题：

方法一：自定义中间件修改请求头 #

在vite.config.js中使用configureServer钩子添加中间件，拦截所有CSS文件请求，强制修改Accept头为能触发纯CSS返回的格式：

export default {
  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      // 匹配所有.css结尾的请求（可根据需要排除CSS模块）
      if (req.url.endsWith('.css') && !req.url.includes('.module.css')) {
        req.headers.accept = 'text/css,*/*';
      }
      next();
    });
  },
};

这个中间件会在Vite处理请求前修改请求头，让Vite的内置逻辑自动返回纯CSS内容，无需额外处理文件读取。

方法二：通过插件钩子跳过JS转换 #

如果你需要更精细的控制，可以编写一个Vite插件，在transform钩子中针对CSS文件直接返回原始内容：

import fs from 'fs';

export default {
  plugins: [
    {
      name: 'force-pure-css',
      transform(code, id) {
        // 仅在开发模式下处理非模块CSS
        if (id.endsWith('.css') && !id.includes('.module.css') && process.env.NODE_ENV === 'development') {
          // 读取原始CSS文件内容返回
          const rawCss = fs.readFileSync(id, 'utf-8');
          return {
            code: rawCss,
            map: null
          };
        }
      }
    }
  ]
};

注意：这种方式需要手动读取文件内容，适合需要对CSS内容做额外处理的场景，但不如第一种方式简洁。

注意事项 #

• 以上配置仅针对开发模式，生产模式下Vite会直接输出编译后的纯CSS文件，不存在热更新代码注入的问题。
• 如果你的项目使用了CSS模块（.module.css），记得在匹配规则中排除这类文件，避免破坏CSS模块的正常功能。

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