Get raw string value by import with vite

Question

I want to get raw string of css in npm module through vite. According to vite manual,
https://vitejs.dev/guide/assets.html#importing-asset-as-string
It says we can get raw string by putting "?raw" at the end of identifier.

So I try this:

import style from "swiper/css/bundle?raw";

But this shows error like:

[vite] Internal server error: Missing "./css/bundle?raw" export in "swiper" package

If I use this:

import style from "swiper/css/bundle";

There are no error, but css is not just load as string but handled as bundle css.
This is not good, because I want to use this css in my lit-based web components.
Are there any way to get css as raw string through vite?

Revivify

Have you tried fetch? – Romberg

In my case, fetch doesn't help, maybe, because I don't want to bind it in document root but want to bind it inside of web component's shadow root. – Revivify

Does this answer help? https://mcmap.net/q/1016232/-implement-bootstrap-in-lit-element-with-javascript – Harter

Answer 1

Evan You (Vite.js and Vue.js creator) has added the inline toggle which fixes the problem of styles also being added to the main CSS bundle when importing.

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

This toggle prevents your CSS from also being bundled into you main CSS bundle as a side effect of importing it into a string.

Contusion