如何从节点模块添加新的css文件答案

【问题标题】：How to add new css file from node module如何从节点模块添加新的css文件
【发布时间】：2017-03-10 11:50:16
【问题描述】：

我试图增强 vue.js boilerplate code，我想使用 flexboxgrid 这个。我在 package.json 中添加并安装了它。我试图将其包含在index.html 中，如下所示：

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

但我在浏览器中收到以下错误：

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/node_modules/flexboxgrid/dist/flexboxgrid.min.css".

我不确定我应该用什么正确的方法来做到这一点，我在做什么，请帮忙。

【问题讨论】：

如错误所示，服务器正在使用错误的标题/我的类型提供文件。我想你必须设置正确的值
@adeneo 我已经给type="text/css" 了，这在哪里必须提到。
您的 node_modules 文件夹是否真的通过 HTTP 公开？可能不是（顺便说一句，这是一件好事）。你得到一个 MIME 类型的 text/html 是因为 web 服务器在将不存在的 node_modules 路径重定向到“/”之后可能正在响应一个 HTML 页面。

标签： javascript css flexbox vue.js

【解决方案1】：

正如 cmets 中的 @1sloc 所述，您可能会在 HTML 中收到 404 错误页面。

在找到更好的解决方案之前，您可以执行以下操作：将flexboxgrid.min.css 复制到项目根目录下的static 文件夹中，并将其作为静态文件从那里提供。这类似于您为应用提供favicon.ico 的方式。

有关处理静态文件的详细信息，您可以参考此问题中的答案： How to set favicon.ico properly on vue.js webpack project?

【讨论】：

顺便说一句，一种解决方案是import "flexboxgrid/dist/flexboxgrid.css" 在您的main.js 中，如this github issue 中所述。虽然它可能有效，但我不喜欢这种解决方案，因为我希望看到 CSS 加载到 html 的标题中。