web-dev-qa-db-ja.com

MIMEタイプがtext / htmlであるため、スタイルシートがロードされない

FirefoxでMERNアプリを実行しているときに、ブラウザーコンソールで次のエラーが発生し、cssがロードされません：The stylesheet http://localhost:3000/src/css/component.css was not loaded because its MIME type, “text/html”, is not “text/css”

私はこのようにindex.htmlにCSSを追加しています：

 <link rel="stylesheet" type="text/css" href="../src/css/component.css" />

どこがおかしいの？

Reactコンポーネント以外のセクションに外部cssを追加する他の方法は何ですか？

コードは ここ

javascriptcssnode.jsreactjsmime-types
11
Shubham

スタイルシート http：// localhost：3000/src/css/component.css は、MIMEタイプ「text/html」が「text/css」ではないためロードされませんでした

エラーの理由は、

ブラウザで提供されている場合は、パブリックディレクトリのみにアクセスできます。

->最初の../src/css/この方法では、ファイルにアクセスできません。これをルートと見なし、htmlを提供しようとします。

-> 2番目、これはcssファイルを含める適切な方法ではありません：

<link rel="stylesheet" type="text/css" href="../src/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="../src/css/demo.css" />
<link rel="stylesheet" type="text/css" href="../src/css/component.css" />

cssファイルを使用する適切な方法は次のようです（reactコンポーネントjsファイルから）：

import './css/component.css';

（react-scripts start）Reactは、cssファイルを自動的にjsに変換して適用します。

それでも、reactの外部でcssファイルを使用する場合は、すべてのcssファイルをパブリックフォルダー内に配置する必要があります（public/css内に配置すると便利です）

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

まだ疑問がある場合は読んでください：

https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started

これがあなたの疑問をすべてクリアすることを願っています。

14
Vivek Doshi

MiniCssExtractPluginを使用していて、「。」が見つからないと、以下の問題が発生することに気付きました。

から

filename: '/style.[contenthash].css'

に

filename: './style.[contenthash].css'

//correct way should be like this

new MiniCssExtractPlugin({
  publicPath: './sass/',
  filename: './style.[contenthash].css'
});

これがお役に立てば幸いです。

1
Sherman Lye

フォルダーcssとjsをパブリックディレクトリに移動し、component.css なので

<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/component.css" />

それは私のために働いた..

より良い方法??

0
Shubham

サーバーにファイルが存在することを確認する必要があります。ソースコードをサーバーにアップロードするときにファイルがない（または見つからない）ため、理由を見つけました。そのため、cssファイルが見つからない場合、サーバーはhtml MIMEタイプを返します

0
VnDevil