如何在Vite项目里通过?inline后缀以字符串形式引入CSS？-css教程-PHP中文网

vite 默认不支持 css 文件的 ?inline 后缀，因其 css 处理管线独立于 js；应改用内置 ?raw 实现字符串引入，或通过插件模拟 ?inline，但后者绕过模块化、hmr 与 postcss 等功能。

如何在vite项目里通过?inline后缀以字符串形式引入css？

可以，但需要额外配置 Vite 的 css.inline 选项或借助插件，原生不支持 ?inline 后缀直接返回 CSS 字符串。

为什么默认 `?inline` 不生效

Vite 默认只对 .js/.ts 文件支持 ?inline（触发 import 返回字符串），CSS 文件走的是专用的 CSS 处理管线：解析、作用域处理、注入 <style></style> 标签。所以 import './style.css?inline' 会报错或静默失败，不是 bug，是设计如此。

用 `raw` 插件 + `?raw` 替代 `?inline`

Vite 内置支持 ?raw 后缀，且对 CSS 文件有效，效果等同于你想要的“字符串引入”：

Vite

为开发、生产构建和库打包配置并优化 Vite。

下载

import cssString from './style.css?raw' → 返回原始未处理的 CSS 文本（不含 @import 展开、无变量替换）
适用于动态插入、编辑器高亮、CSS-in-JS 场景
注意：不会走 PostCSS、不会解析 url() 相对路径，路径仍是原始字符串
若需处理 url() 或 PostCSS，得自己调用 transform API 或改用构建时预处理

想保留 `?inline` 写法？加一个简易插件

如果团队已有大量 ?inline 用法（比如从 Webpack 迁移），可以用插件劫持 CSS 导入：

export default function cssInlinePlugin() {
  return {
    name: 'css-inline',
    resolveId(id) {
      if (id.endsWith('?inline')) {
        return id;
      }
    },
    load(id) {
      if (id.endsWith('?inline')) {
        const filePath = id.replace(/\?inline$/, '');
        // 简单读取原始内容（跳过 Vite CSS 处理）
        return `export default ${JSON.stringify(
          require('fs').readFileSync(filePath, 'utf-8')
        )};`;
      }
    }
  };
}

然后在 vite.config.ts 中启用它。但要注意：