The Vue 3 application I am working on has a dependency on an external, remotely hosted stylesheet, but the source hostname to that sheet is also dependent on the environment.

To make things more complicated, the vue app needs to be hosted on a shared template that we can’t add that css reference to directly, so we want to be able to compile it into the app.

I’ve used this library: CSS Injected by JS

to compile the app-specific styles into the compiled JS so that it’s all self contained. This works with the styles defined in the templates, but I’m having a difficult time making this include the external stylesheet.

I added an import tag to the main app.vue component like this:

<style>
@import "https://dev.mysite.com/v/1.2.3/style.css"
</style>

and that works well enough; the stylesheet is loaded with the app and this would solve the problem!

Unfortunately, depending on where the app runs, that url for the css needs to change, like on stage it might be stage.mysite.com/v/1.0.1/style.css and on prod it might be just mysite.com/style.css…

I can’t seem to figure out a way to make that @import action take a variable, or otherwise be conditional.

Is there any way to do this?