Problem serving firebaseui.css in VueJS from node module

Question

So basically I've got this problem for a long time now and thought I fixed it but that wasn't the case.

I started the development of my site with this guide and it helped me create a PWA using the vue-cli.

While adding firebase authentication to it I also used this guide to add firebaseui to my project.

It told me to add this line to my index.html

<link type="text/css" rel="stylesheet" href="node_modules/firebaseui/dist/firebaseui.css" />

sadly this didn't worked out and I got this error message in my chrome console:

Refused to apply style from 'http://localhost:8080/node_modules/firebaseui/dist/firebaseui.css'
 because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

This was 2 months ago and I tried a lot of things to fix this issue before finding a temporary solution:

When following the link to the CSS resource I got a "Cannot GET /node_modules/firebaseui/dist/firebaseui.css" in my browser and I thought that maybe my local server wasn't serving this file.

So I went into the build/dev-server.js file and added this line:

app.use(express.static('node_modules'))

and changed the link in my index.html to:

<link type="text/css" rel="stylesheet" href="/firebaseui/dist/firebaseui.css" />

Now my website correctly loads all firebaseui components when running "npm run dev" but now it still doesn't do it when running "npm run build" as my server prints this:

"GET /firebaseui/dist/firebaseui.css" Error (404): "Not found"

I guess this makes sense, as I am writing this down because I previously only changed the code in the dev-server.js and not in a build/production related file

Basically, I am asking for a way to user the firebaseui.css without having to change stuff in the dev-server.js to have it work in production or for someone to tell what other files in the build directory I have to edit to make it work.

Thanks in advance and if you need to see more of my code pls ask for it and I will update this post!

Answer 1

Holy shit, so I did more generic digging and found this discussion:

https://github.com/vuejs-templates/webpack/issues/604

fixed my issue by deleting both the import in the index.html and the now useless app.use line in dev-server.js

and now I simply added

import 'firebaseui/dist/firebaseui.css'

in my main.js and the firebaseui components are rendering properly on both the dev and production build! :)