import CSS file as URL (like for an image)

[yukulele]

Snowpack allow to import an image (or any file) this way:

import imgSrc from './image.jpg'
const img = new Image()
img.src = imgSrc

As we can see in this example import only get the URL of the file.

For CSS, Snowpack have another behaviors : CSS is directly added to DOM.

I only want to get my CSS file URL.

How to configure Snowpack to disable special beahviors for CSS (or json)?

[FredKSchott]

Does this work for you?

const myCssUrl = new URL('./my.css', import.meta.url).href

Using ESM imports this way isn't recommended, and the export that you get back is essentially the same as the snippet I shared above.

[yukulele]

SnowPack ⩾ 2.9.0: snowpack dev works, but snowpack build does not. (regardless of the presence of --reload)
SnowPack < 2.9.0: both works as expected.

[yukulele]

@FredKSchott do you reproduce the bug?

[matthieu-fesselier]

I also reproduced this

[FredKSchott]

I can reproduce! It's due to this line in the build: https://github.com/pikapkg/snowpack/blob/master/snowpack/src/commands/build.ts#L58

Instead of stripping everything, we just want to strip JS assets and leave any CSS. This is a bit tricky, but I bet we can make it work with a simple file extension check (if one exists and is not JS).

A workaround for now: if you use a native CSS @import 'bootstrap/dist/css/bootstrap.css' statement anywhere in your app, Snowpack will auto-detect it. No manual "install" entry needed, and the URL will now work in both dev and build.

[FredKSchott]

Issue prioritized here: #1144

Would love any help on a PR!