从节点模块在VueJS中提供firebaseui.css时出现问题

Question

所以基本上我已经有很长时间了，以为我已解决了这个问题，但事实并非如此。

我从本指南开始开发网站，它帮助我使用vue-cli创建了PWA。

在向其中添加firebase身份验证时，我还使用了本指南将firebaseui添加到我的项目中。

它告诉我将此行添加到我的index.html

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

不幸的是，这没有解决，我在Chrome控制台中收到了以下错误消息：

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.

这是2个月前，在尝试找到临时解决方案之前，我尝试了很多方法来解决此问题：

当跟随指向CSS资源的链接时，我的浏览器中出现“无法获取/node_modules/firebaseui/dist/firebaseui.css”的提示，我认为本地服务器可能没有在提供此文件。

所以我进入了build / dev-server.js文件并添加了这一行：

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

并将index.html中的链接更改为：

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

现在，我的网站在运行“ npm run dev”时正确加载了所有firebaseui组件，但是现在在运行“ npm run build”时它仍然不执行此操作，因为我的服务器显示了以下内容：

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

我想这是有道理的，因为我之前写下来是因为我以前只更改了dev-server.js中的代码，而不更改了与构建/生产相关的文件中的代码

基本上，我正在寻求一种使用firebaseui.css的方法，而不必更改dev-server.js中的内容以使其在生产中正常工作，或者有人告诉我必须编辑的build目录中的其他文件这行得通。

在此先感谢您，如果您需要查看更多我的代码，请提出要求，我将更新此帖子！

Answer 1

天哪，所以我进行了更多的常规挖掘，并找到了下面的讨论：

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

通过删除index.html中的import和dev-server.js中现在无用的app.use行，解决了我的问题

现在我只是添加了

import 'firebaseui/dist/firebaseui.css'

在我的main.js和firebaseui组件中，可以在开发和生产版本上正确呈现！:)