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

Question

我在尝试增强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".

我不知道我应该怎么做才是正确的，我在做什么，请帮帮忙。

Answer 1

正如@1sloc在评论中提到的，你可能会在HTML中得到一个404错误页面。

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

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