2016-10-27 18 views
1

ノードモジュールから新しいCSSファイルを追加するには、私はこれでflexboxgridを使用していました。私はpackage.jsonに追加してインストールしました。 、は、どのように私はvue.js <a href="https://github.com/vuejs/vue-hackernews-2.0" rel="nofollow">boilerplate code</a>を強化しようとしていた

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

私はこれこれを行うための正しい方法がどうあるべきかわからない:

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

しかし、私は、ブラウザで次のエラーを取得しています:私はこのようなindex.htmlでこれを含めるしようとしていました私は何をしていますか、助けてください。コメントでの@ 1slocで述べたように

+2

エラーが示すように、サーバは間違ったヘッダ/地雷の種類のファイルを提供しています。 – adeneo

+0

@adeneo私は既に 'type =" text/css "'を与えていますが、ここでこれを言及する必要があります。 – Saurabh

+0

は実際にはHTTPを介して公開あなたのnode_modulesフォルダですか?おそらくそうではありません(それは良いことです)。 Webサーバは、おそらく存在しない「/」へのパスをnode_modulesリダイレクトした後、HTMLページで応答しているので、あなたは、MIMEタイプtext/htmlのを取得しています。 – 1sloc

答えて

0

、あなたはおそらくHTMLで404エラーページを取得しています。

より良い解決策が見つかるまで、以下のようにしてください:flexboxgrid.min.cssをプロジェクトルートのstaticフォルダにコピーし、そこから静的ファイルとして提供してください。これは、あなたのアプリのためにfavicon.icoを果たすだろうかと似ています。あなたはこの質問に答えを参照することが

静的ファイルの取り扱いの詳細については

、: How to set favicon.ico properly on vue.js webpack project?

+0

ところで、[このgithubの問題](https://github.com/erikras/react-redux-http://www.jithub.com/)で説明されているように、あなたの 'main.js'でflexboxgrid/dist/flexboxgrid.css"を "インポート" universal-hot-example/issues/171)を参照してください。それが仕事かもしれないが、私はCSSは、HTMLのヘッダにロードされたばかり見ることを好むように、私は、そのソリューションのファンではありません。 – Mani

関連する問題

 関連する問題