通过使用 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切换按钮，修复了导入 .css 文件时样式也被添加到主 CSS 包中的问题。

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

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