Vite 默认不支持 CSS 文件的 ?inline 后缀，因其 CSS 处理管线独立于 JS；应改用内置 ?raw 实现字符串引入，或通过插件模拟 ?inline，但后者绕过模块化、HMR 与 PostCSS 等功能。
可以，但需要额外配置 Vite 的 css.inline 选项或借助插件，原生不支持 ?inline 后缀直接返回 CSS 字符串。
为什么默认 ?inline 不生效
Vite 默认只对 .js/.ts 文件支持 ?inline（触发 import 返回字符串），CSS 文件走的是专用的 CSS 处理管线：解析、作用域处理、注入 <style> 标签。所以 import './style.css?inline' 会报错或静默失败，不是 bug，是设计如此。
用 raw 插件 + ?raw 替代 ?inline
Vite 内置支持 ?raw 后缀，且对 CSS 文件有效，效果等同于你想要的“字符串引入”：
-
import cssString from './style.css?raw'→ 返回原始未处理的 CSS 文本（不含@import展开、无变量替换） - 适用于动态插入、编辑器高亮、CSS-in-JS 场景
- 注意：不会走 PostCSS、不会解析
url()相对路径，路径仍是原始字符串 - 若需处理
url()或 PostCSS，得自己调用transformAPI 或改用构建时预处理
想保留 ?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 中启用它。但要注意：
- 该插件绕过了 Vite 的 CSS 模块化、source map、HMR 支持
- 无法处理
@import、url(./img.png)等依赖，这些路径不会被重写 - 生产构建时，Vite 不会为此类导入做 tree-shaking 或提取 CSS
真正要兼顾可维护性和功能完整性，优先用 ?raw；只有当历史包袱强制要求 ?inline 字面量时，才考虑插件——但得接受它只是个字符串搬运工，和 Vite 的 CSS 生态是隔离的。
