?inline 不阻止 CSS 自动插入，因其仅改变导出内容（返回字符串），不跳过 Vite 的 CSS 构建与注入流程；真正禁用需用 ?raw 或 fetch 运行时加载。
为什么 ?inline 不会让 CSS 停止自动插入
很多人试过在 Vite 中这样写：import './style.css?inline'，以为能阻止样式被注入到 ，结果发现页面依然有样式生效。这是因为 Vite 的 CSS 处理逻辑中，?inline 只影响模块的**导出内容**（即返回字符串而非空对象），但不干预构建阶段对 .css 文件的默认处理流程——只要文件被 import，且没被显式标记为“不参与样式注入”，Vite 仍会把它走一遍常规 CSS 构建 + 自动注入链。
-
?inline实际作用：让模块导出 CSS 文本字符串，比如export default "body { color: red; }" - 它不会跳过 Vite 的
css插件处理，所以样式仍会被收集、压缩、注入 - 真正禁用自动插入，得配合
?raw或绕过import走纯运行时加载
正确禁用自动插入：改用 ?raw + 手动控制
如果你的目标是“引入 CSS 内容但不自动插入”，?raw 是更可靠的选择。它绕过 Vite 的 CSS 处理管道，只做字面量读取，且不触发任何样式注入行为。
-
import cssString from './style.css?raw'→ 得到纯字符串，无副作用 - 后续可手动创建
标签并 append，或传给第三方库（如 emotion、styled-components） - 注意：不能用
?raw加?inline，两者互斥；Vite 会优先按?raw处理 - 路径必须是相对或绝对有效路径，Vite 不支持
?raw用于 CSS 预处理器（如.scss?raw会报错）
import cssString from './theme.css?raw'
// 手动注入（仅需一次）
if (!document.getElementById('theme-style')) {
const style = Object.assign(document.createElement('style'), {
id: 'theme-style',
textContent: cssString
})
document.head.appendChild(style)
}
想动态切换主题？别依赖 import，改用 fetch + URL
当需要根据条件加载不同 CSS（比如暗色/亮色主题），硬编码 import 会导致所有样式被打包进主 chunk，失去按需加载意义。此时应避免构建期导入，改用运行时拉取。
- Vite 开发时支持
fetch(new URL('./dark.css', import.meta.url))，返回Response，再用text()提取内容 - 生产环境需确保 CSS 文件被正确识别为静态资源（放在
public/下或启用assetsInclude配置） - 不要对
fetch结果直接innerHTML到，注意 CSP 和重复注入问题 - 如果使用
import.meta.glob动态匹配多个 CSS，也要注意它仍会触发构建期处理，无法规避注入
兼容性与构建产物注意点
使用 ?raw 或 fetch 方式后，CSS 不再进入 Vite 的 CSS bundle 流程，意味着你将失去：
- 自动的
@import解析和内联（需自行处理） - CSS Modules、
:global等功能失效（因为没走css插件） - PostCSS 处理（如 autoprefixer、tailwind @layer）不会执行
- 开发时 HMR 对该 CSS 文件无效（改了文件，
?raw导入的内容不会热更新）
所以，只有当你明确需要绕过 Vite 默认样式管理机制时，才用这套方案；日常组件级样式，老实用 import './Component.module.css' 或普通 import './index.css' 更稳妥。
最易忽略的一点：?inline 在 Vite 4.3+ 中已不推荐用于 CSS，文档里它主要面向 SVG 和 Worker 场景；拿它对付 CSS，本质是误用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
