1

I was trying to enhance vue.js boilerplate code, I wanted to use flexboxgrid with this. I added it in package.json and installed it. I was trying to include this in index.html like this:

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

But I am getting following error in the browser:

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

I am not sure what I should be right way to do this this, what am I doing wring, Please help.

Saurabh
  • 71,488
  • 40
  • 181
  • 244
  • 2
    As the error indicates, the server is serving the file with the wrong headers/mine type. You have to set the correct values I suppose – adeneo Oct 27 '16 at 17:21
  • @adeneo I have already given `type="text/css"` there, where does this has to be mentioned. – Saurabh Oct 27 '16 at 17:39
  • Is your node_modules folder actually exposed through HTTP? It probably is not (and that is a good thing, by the way). You're getting a MIME type text/html because the web server presumably is responding with an HTML page, after redirecting the non-existing node_modules path to "/". – 1sloc Oct 27 '16 at 18:16

1 Answers1

0

As mentioned by @1sloc in comments, you are probably getting a 404 error page in HTML.

Till you find a better solution, you may do as follows: copy flexboxgrid.min.css to the static folder at the project root, and serve it as a static file from there. This is similar to how you would serve a favicon.ico for your app.

For details on handling static files, you may refer to the answer in this question: How to set favicon.ico properly on vue.js webpack project?

Community
  • 1
  • 1
Mani
  • 23,635
  • 6
  • 67
  • 54
  • BTW, one solution is to `import "flexboxgrid/dist/flexboxgrid.css"` in your `main.js`, as discussed in [this github issue](https://github.com/erikras/react-redux-universal-hot-example/issues/171). While it may work, I am not a fan of that solution, as I would prefer to see the CSS getting loaded in the header of html. – Mani Oct 28 '16 at 01:39