Using the path of an imported resource within my code.

[zeel01]

Context: I'm writing a widget that others can include on their website by including a single <script> tag that I provide to them. My goal is for this single script to take care of loading everything else the widget needs including styles, other scripts, images, etc. Therefore my bundle output should include one main script to bootstrap the widget, and a single stylesheet which will be loaded when that script creates a <link> tag on the page.

My styles are authored in Sass, and I'm also including a few additional CSS files from other packages. Ideally these should be wrapped up into one CSS bundle. (I'm also running into #540 with regard to Fonts)

Since I need my script to handle creating the <link> tag for the styles, I need the script to know the actual path of the output CSS bundle.

How do I get the path of a bundle within my script when importing a resource?

I've seen examples online that look like this:

import styles from './styles.css';

Where styles now contains a string that is the path to bundled resource. However, when I try this styles is nothing but an empty object.

For example, this person https://www.peterbe.com/plog/parcel-bundle-css-remix-app seems to be doing exactly this. The rest of what they're doing in that article isn't really relevant, but in each example is appears that their code expects that import X from "path.css" will result in X containing the path to whatever path.css was turned into.

I'm not sure if I'm misunderstanding this, if maybe that's an older version of Parcel, or if I'm doing something non-obvious incorrectly.

Bonus question: For testing, I have an HTML page for Parcel to serve. When I test though, Parcel adds its own <link> tag to the head of the HTML output. Since my script will be adding its own <link> tag, how can I tell Parcel not to add this?

[mischnic]

Try

import styles from 'url:./styles.css';

or

new URL('./styles.css', import.meta.url)

[mischnic]

That is a good point. Though generally I'd say that new URL() is the better option because it works across bundler and is also somewhat bundler-agnostic as it also works in the browser natively.

parcel-bundler/website#1094

[zeel01]

Took me a minute to figure out why that works, very interesting. I was able to find that in the docs (https://parceljs.org/languages/javascript/#url-dependencies), don't think I would have guessed that it would do what I needed in this instance. I see what you mean too, if I ran the same code directly in the browser it wouldn't choke on that, but those import statements it would.

Thanks for the help.

[zeel01]

Actually, there seems to be an issue using the URL constructor for my usecase. When I do:

import styleURL from "url:@fortawesome/fontawesome-pro/css/all.min.css";

This works as expected. But if I instead use:

new URL('@fortawesome/fontawesome-pro/css/all.min.css', import.meta.url)

I'll get this error:

@parcel/resolver-default: Cannot load file './@fortawesome/fontawesome-pro/css/all.min.css'

It seems like in this instance, dependency resolution isn't checking node_module as is does with import. This of course would also not work if I ran the code natively in the browser either, so I'm assuming this works as intended.

[mischnic]

Exactly, you'd need

new URL('npm:@fortawesome/fontawesome-pro/css/all.min.css', import.meta.url)

new URL() takes a relative path as opposed to imports.

https://parceljs.org/features/dependency-resolution/#url-schemes

[zeel01]

Ah, interesting.