css - 使用 vite 导入获取原始字符串值

Question

我想通过 vite 在 npm 模块中获取原始的 css 字符串。根据 vite 手册，
https
://vitejs.dev/guide/assets.html#importing-asset-as-string 它说我们可以通过将“？raw”放在标识符末尾来获取原始字符串。

所以我试试这个：

从“swiper/css/bundle?raw”导入样式；

但这显示如下错误：

[vite] 内部服务器错误：“swiper”包中缺少“./css/bundle?raw”导出

如果我使用这个：

从“swiper/css/bundle”导入样式；

没有错误，但是 css 不仅作为字符串加载，而且作为捆绑 css 处理。
这不好，因为我想在我的基于 lit 的 web 组件中使用这个 css。
有没有办法通过 vite 将 css 作为原始字符串？

Answer 1

Evan You（Vite.js 和 Vue.js 的创建者）添加了inline切换，修复了在导入.

import style from "swiper/css/bundle.css?inline";

此切换可防止您的 CSS 也被捆绑到您的主 CSS 包中，作为将其导入字符串的副作用。