如何在Vite中使用?inline参数以内联形式引入CSS？-css教程-PHP中文网

?inline 导出处理后的 CSS 字符串，但样式仍会自动注入页面；它不跳过 PostCSS、压缩、HMR 等完整流程，与跳过所有处理的 ?raw 有本质区别。

如何在vite中使用?inline参数以内联形式引入css？

?inline 不是让你“把 CSS 当字符串读进来”，而是让 Vite 把 CSS 内容以字符串形式导出，同时仍走完整 CSS 处理流程（注入 。这点极易误解。

`?inline` 的真实行为：导出字符串，但不跳过处理

它和 ?raw 完全不同：?raw 是跳过所有 loader，原样读文件；?inline 仍经过 Vite 的 CSS 插件链（如 PostCSS、CSS Modules 判断、minify 等）。
所以即使你写了 import cssStr from './index.css?inline'，该 CSS 依然会被注入到页面的
常见误用场景：想动态插入样式或做 SSR 字符串拼接，结果发现样式重复出现了两次（一次自动注入，一次你手动用 document.write 插入）。

无序列表呈现关键事实：

import cssStr from './a.css?inline' 导出的是一个字符串，内容是处理后的 CSS（已加前缀、压缩等）
该 CSS 文件仍会像普通 import './a.css' 一样被注入到页面头部
构建时它仍参与 chunk 分割，不会强制内联进 JS bundle（除非体积小且满足 Vite 默认策略）
无法用于禁用样式注入 —— 没有开关能关掉这个副作用

什么时候该用 `?inline`？典型适用场景

需要获取「经 Vite 处理后的最终 CSS 字符串」用于后续操作，比如：
- 注入到 iframe 的 document.head 中
- 作为字符串传给第三方库（如某些图表库的 theme 参数）
- 在服务端渲染中收集 critical CSS（注意：需配合插件拦截 HMR 注入逻辑）
不适合替代 ?raw 来做静态资源加载或构建时文本替换

示例（安全用法）：

<pre class="brush:php;toolbar:false;">import themeCSS from './theme.css?inline'
<p>// 注入到 iframe，避免污染主文档
const iframe = document.getElementById('preview')
const doc = iframe.contentDocument
doc?.head.appendChild(doc.createElement('style')).textContent = themeCSS
</p>

注意：上面代码在开发时会触发两次样式注入（Vite 自动 + 你手动），所以实际使用建议仅在非主文档上下文中用，或搭配 if (import.meta.env.PROD) 控制。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

和 `?raw`、`?url` 的关键区别

?raw：跳过所有 CSS 处理，返回原始文件内容（未加前缀、未压缩、无 scope 处理），也不会注入样式
?inline：保留全部 CSS 处理，返回处理后字符串，同时注入样式
?url：对 CSS 不生效（只对字体、图片等二进制资源有意义），Vite 会报 warning

容易踩的坑：

混用 ?inline 和 !important 类 hack 写法，导致样式优先级混乱（因为注入顺序不可控）
在 Vue SFC 的 <script setup></script> 里 import ?inline，又在里写同名类，造成意外交互
以为 ?inline 能减小 JS bundle 体积 —— 实际上它可能让 CSS 同时存在于 JS 字符串 + 单独 style 标签中，反而增大总体积

真正想“只拿字符串、不注入样式”，目前 Vite 没有内置方案。你需要：