Trying to use custom CSS but get "MIME type ('text/html') is not a supported stylesheet MIME type" error

[LukeTwomey]

So I've got a NextJS app, to which I've added a css file into my public/styles folder. I'm pointing to that in my Giscus settings, like so:

And when the page loads, I get the following error at the console:

Am I doing this incorrectly? Is there a way to specify the MIME type in the theme?

[laymonage]

You cannot use a relative URL for the theme at the moment (as it will be relative to https://giscus.app), so try specifying a full URL.

[LukeTwomey]

Thanks, makes sense. Is this something that it will need access to during build time? I guess so...

i.e. can it be a css file that its contained within the same repo (that will become available once the site has been built and served), or would it be better contained within a separate repo (one serving an api for example) so it can retrieve the css file from that, as it's already a resource that's up and running?

[LukeTwomey]

Got it working using the latter option (set up a route on a separate api to serve this css file), but curious to know if the previous approach is at all possible, by keeping the css file in the same repo?

In a completely separate API repo:

Back in the original repo where I'm displaying the comments:

Result:

[laymonage]

You could use services such as JSDelivr's CDN that can serve a file from GitHub with the right Content-Type header, e.g. https://cdn.jsdelivr.net/gh/LukeTwomey/LukeTheWebDev@main/styles/blog.module.css

[LukeTwomey]

Awesome tip, thanks

[sivert-io]

Still defaults to utteranc.es domain?

I haven't tested production yet, would be nice to know it works before I push it...

[laymonage]

? This discussion is for giscus, not utterances.

[EzioMercer]

How to test styles locally? I don't want to push some changes to css files somewhere to see results. Are there any options? May be there is not-frame option to have everything on my side?