web-dev-qa-db-ja.com

MIMEタイプのため、スタイルシートがロードされませんでした

私はgulpを使用してコンパイルとブラウザ同期を行い、ブラウザを自分の変更と同期させるWebサイトを開発しています。

Gulpタスクはすべてを正しくコンパイルしますが、Webサイトでは、スタイルが表示されず、コンソールに次のエラーメッセージが表示されます。

' http：// localhost：3000/assets/styles/custom-style.css 'からスタイルの適用を拒否されました）はサポートされているスタイルシートのMIMEタイプではなく、厳密なMIMEチェックが有効になっています。

今、私は本当になぜこれが起こるのか理解していません。

HTMLにはこのようなファイルが含まれています（これは間違いなく正しいです）。

<link rel="stylesheet" type="text/css" href="assets/styles/custom-style.css"/>

そしてスタイルシートは、今のところブートストラップとフォントが素晴らしいスタイルをマージしたものです（まだカスタムなものはありません）。

これはフォルダ構造であるため、パスも同様に正しいです。

index.html
assets
|-styles
  |-custom-style.css

しかし、私はエラーを受け続けています。

それが何であるかという考えはありますか？これはgulp/browsersyncのための何か（おそらく設定？）ですか？

どんな援助でも本当に感謝されていて、必要ならもっと詳細を尋ねるのを遠慮しなくしてください。

ありがとう

htmlcssgulpmime-typesbrowser-sync
166
Nick

わかりました私は私が解決策を見つけたと思います、そして私はここで他の誰かを助けるためにそれを書いています。

問題はコメントで始まるCSSライブラリにあると思います。開発中はファイルを縮小したりコメントを削除したりしませんが、これはスタイルシートがコメントから始まることを意味します。 CSSとは異なるものとして見られました。

ライブラリを削除し、それをベンダーのファイル（コメントなしで常に最小化されています）に入れることで問題は解決しました。

繰り返しますが、これが100％確実であることを確信しているわけではありませんが、それは今のところ期待通りに機能するので、まだ私にとっては勝利です。

85
Nick

Node.jsアプリケーションの場合は、設定を確認してください。

app.use(express.static(__dirname + '/public'));

/publicの最後にスラッシュがないので、htmlのhrefオプションに含める必要があります。

href="/css/style.css">

スラッシュ（/public/）を含めた場合は、href="css/style.css"を実行するだけです。

お役に立てば幸いです。ありがとう

61
JPaulino

角度構造に従ってmake a folder just below/above style.css fileと<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">のようなリンクを提供します enter image description here

50
Gopi G.A

Cssファイルを正しく参照していないときにも、このエラーが発生する可能性があります。 

たとえば、リンクタグが 

<link rel="stylesheet" href="styles.css">

しかし、あなたのCSSファイルはstyle.css（秒なしで）と命名されます、そしてあなたがこのエラーを見る可能性が高いです。 

39
John Deverall

ほとんどの場合、これは単に CSSファイルパスが間違っている可能性があります 。そのため、Webサーバーはhtml型のstatus: 404コンテンツペイロードとともにNot Foundを返します。

ブラウザはCSSスタイルを適用する目的で<link rel="stylesheet" ...>タグからこの（間違った）パスをたどります。しかし、返されたコンテンツタイプは矛盾するため、エラーを記録します。

enter image description here

22
Tharaka Manawardhana

ブートストラップテンプレートでこのエラーが発生しました。

<link href="starter-template.css" rel="stylesheet">

それから私はリンクからrel="stylesheet"を削除しました。

<link href="starter-template.css">

そしてすべてがうまくいきます。ブートストラップテンプレートを使用している場合はこれを試してください。

20
Amandeep Saini

Angular.jsonのAngular 6ビルド設定の styles セクションでcssファイル（私の場合はAngularテーマ）を単に参照しました

enter image description here

これは質問に答えませんが、それが私のためだったので、適切な回避策であるかもしれません。

16
dvlsc

'href' - > 'src'を変更しました。だからこれから：

<link rel="stylesheet" href="dist/photoswipe.css"> 

これに：

<link rel="stylesheet" src="dist/photoswipe.css"> 

3時ここにいて、それはうまくいった、なんで今すぐだが、それは仕事をした。

14
Sebastian Voráč

あなたのファイル内のコメントはこれをトリップします。 ミニファイナの中にはコメントを削除しないものがあります。

_ _も_

NodeJS を使用して、静的ファイルをexpressを使用して設定すると、次のようになります。

app.use(express.static(__dirname + '/public'));

ファイルを正しくアドレス指定する必要があります。

私の場合、両方が問題だったので、CSSリンクの先頭に "/css/styles.css"を付けました。 

例：

<link type="text/css" rel="stylesheet" href='/css/styles.css">
8
metal_jacke1

Angular-Cliを使用してWebサーバーのサブフォルダに公開している人のためにも、この答えをチェックしてください。

ドメイン内の非ルートパスにデプロイする場合は、<base href="/">内のdist/index.html.タグを手動で更新する必要があります。

この場合、<base href="/sub-folder/">に更新する必要があります。 

https://github.com/angular/angular-cli/issues/1080

8
simonberry

この記事で解決策を述べたように、解決策のいくつかは私のために働いていますがCSSはページに適用されません。

簡単に言うと、 "css"ディレクトリを "Assest /"ディレクトリに移動しただけで、すべてうまくいきます。 

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="assets/css/site.css" >

7
Jitendra G2

私の問題は、私がwebpackを使用していて、私のhtml cssリンクには相対パスがあり、ネストされたページにナビゲートするたびに間違ったパスに解決されることです。

<link rel="stylesheet" href='./index.css'>

だから私のものは単一ページのアプリなので、簡単な解決策は.を削除することでした。

<link rel="stylesheet" href='/index.css'>

だからそれは常に/index.cssに解決されます

5
Jared

私は同じ問題を受けていて、それから私が書いたのをチェックしました

index.htmlの<base href="./">

それから私はに変わった 

<base href="/">

それからそれはうまく働きます

5
VIKAS KOHLI

Node.jsアプリケーション用。サーバーファイルに必要なすべてのモジュールをインポートした後にこれを使用してください。

app.use(express.static("."));
  • express のexpress.static組み込みミドルウェア関数とこれをあなたの.htmlファイルの中で：<link rel="stylesheet" href="style.css">
4
Purav Barot

あなたはクロムツールを開き、ネットワークタブを選択し、あなたのページをリロードしそしてCSSのファイル要求を見つけそしてそれがファイル内にあるものを探すことができる。 2つのライブラリをファイルにマージするときに、cssに適切ではない文字やヘッダーなど、何か問題があったのでしょうか。 

4
Yunior González Santana

私がライブでパッケージを展開していたとき、私はパブリックHTMLフォルダの外に持っていました、それは理由のためでした。 

しかし、どうやら厳密なMIMEタイプのチェックが有効化されています。 

しかし、index.phpファイルと同じディレクトリにスタイルフォルダを移動するとすぐにエラーが発生しなくなり、スタイルは完全に有効になりました。

4
Jabulani

この問題の主な理由の1つは、ロードしようとしているCSSファイルが有効ではありませんCSS file. causes:- invalid MIME type、having Javascript code inside style sheet-（間違ったwebpackバンドラー設定が原因で発生する可能性があります） 

ロードしようとしているファイルが有効なCSSスタイルシートであることを確認してください（ネットワークタブからファイルのサーバーURLを取得し、新しいタブをクリックして確認します）。

bodyタグ内を使用する際の考慮事項としてUseful info。

本体の内部にlinkタグを含めることは、タグを使用する標準的な方法ではありませんが。ビジネスのユースケースが要求する場合（ただし、コンテンツの本体を提供する場合）、ページの最適化に使用できます（詳細： https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ）サーバーは、提供されたコンテンツでHTMLページをレンダリングする必要があるように構成されています。

Bodyタグの中に留まりながら、<body> <!-- … --> <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" /> <!-- … --> </body>のようにitemPropertyタグに属性linkを追加する必要があります。

itemPropertyに関する詳細は、以下をご覧ください。 https://webmasters.stackexchange.com/questions/55130/can-i-use-link-tags-in-the-body-of-an-html-document

3
BALA

私は同じ問題を抱えています。 あなたのプロジェクトの構造が次の木のようなものであれば、こうすることをお勧めします。

index.html
assets
|-styles
  |-custom-style.css
server
  |- server.js

server.jsにこのコードを追加してください：

var path = require('path')
var express = require('express')
var app = express()

app.use('/assets', express.static(path.join(__dirname, "../assets")));

注： PathはNode.JSモジュールに組み込まれているため、npm経由でこのパッケージをインストールする必要はありません。

2
Mostafa Ghadimi

答えの長いリストに加えて、私はパスがブラウザ同期の観点から間違っていることに気づかなかったので、この問題も私に起こりました。

この単純なフォルダ構造を考えます。

package.json
app
  |-index.html
  |-styles
      |-style.css

<link>のindex.html内のhref属性はapp/styles/style.cssではなくstyles/style.cssである必要があります

2
Stig Perez

Javascriptでスタイルを次のように設定している場合： 

    var cssLink = document.createElement("link");
    cssLink.href = "./content.component.scss";
    cssLink.rel = "stylesheet";
   --> cssLink.type = "html/css";
    (iframe as HTMLIFrameElement).contentDocument.head.appendChild(cssLink);

それから、cssLint.type（上の説明では矢印で示されています）を "MIME"に変更してください。

   cssLink.type = "MIME";

あなたがエラーを取り除くのに役立ちます

2
Shriram

Azure B2Cユーザーフローにカスタムルックアンドフィールを追加するのと同じ問題があるこの問題に遭遇しました。私が見つけたのは、htmlページが参照したルートが、ストレージボブへのパスではなく、../oauth/v2（つまり、oauthサーバーパス）だったことです。

ページの完全なURLを入力すると、問題が解決しました。

1
Liam

ファイルの名前とパスを3回チェックします。私の場合は、ターゲットフォルダに次のようなコンテンツがあります。

lib
    foobar.bundle.js
    foobr.css

そしてこのリンク：

<link rel="stylesheet" href="lib/foobar.css">

私は、ブラウザがjsファイルをロードしようとしていて、ファイルが見つかりませんというエラーを表示する代わりに、そのMIMEタイプについて文句を言っていたと思います。

1
pasx

私は同じ問題を抱えていて、何時間ものデバッグの後でそれが書くことができない一時ファイルに関連していることがわかった。 admin> config>ファイルシステムに行ってください。サーバーにそのディレクトリへの書き込み権限があることを確認してください。

1
Asit

Angularでは、このエラーがありました。私が解決した方法は、リンク要素にngIfを配置して、動的URLが入力されるまでDOMに表示されないようにすることでした。

少しOPとは無関係かもしれませんが、私は答えを探してここに行きました

<link *ngIf="cssUrl" rel="stylesheet" type="text/css" [href]="sanitizer.bypassSecurityTrustResourceUrl(cssUrl)">
1
SeanKPS

この thread からの解決策が私の問題を解決しました

これがだれにも役立つかどうかはわかりませんが、angular-cliを使用している場合は、index.htmlからcss参照を削除し、それを "style"部分の下のangular-cli.jsonファイルに追加することでこれを修正しました。 ____。]ウェブサーバーを再起動した後、私はもうその問題を抱えていませんでした。

1
newbie

jSなしでexpressを使用する場合は、次のように記述します。app.use（express.static（ 'public'））;

私のcssファイルはpublic-> stylesheets-> app.cssにあります

1
Tal Hakmon

圧縮が有効か無効かを確認してください。あなたがそれを使用したり、誰かがそれを有効にした場合、app.use(express.static(xxx))は役に立ちません。サーバーが圧縮を許可していることを確認してください。

BrotliとCompression PluginsをWebpackに追加すると、同様のエラーが表示され始めました。サーバーは、このタイプのコンテンツ圧縮もサポートする必要があります。

Expressを使用している場合、以下が役立ちます。

app.use(url, expressStaticGzip(dir, gzipOptions)

モジュールの呼び出し：express-static-gzip

私の設定は次のとおりです。

const gzipOptions = {
  enableBrotli: true,
  customCompressions: [{
  encodingName: 'deflate',
  fileExtension: 'zz'
 }],
 orderPreference: ['br']
}
1
Greg Woz

Rel = "stylesheet"を削除し、type = "text/html"を追加してください。だからそれはこのようになります - 

<link  href="styles.css" type="text/html" />
1
Sanjay Choubey

私はこの問題に出会った。 - ' http://m.b2b-v2-pre1.jcloudec.com/mobile-dynamic-load-component-view/resource/js/resource/js/need/layer.cssからスタイルを適用することを拒否された？ 2.0 'MIMEタイプ（' text/html '）はサポートされているスタイルシートのMIMEタイプではなく、厳密なMIMEチェックが有効になっているためです。 パスを変更すると、この問題を解決できる可能性があります。

1
ZILONG PAN

私はそれがlocalhostとphpStormに移動したときに私がオンラインで働いていると知っていたサイトでこの問題を抱えていました。

これはオンラインでうまくいきました：

    <link rel="stylesheet" href="/css/additional.css">

しかしlocalhostのために私はスラッシュを取り除く必要がありました：

    <link rel="stylesheet" href="css/additional.css">

だから私はすでにここで提供されているいくつかの答えを補強しています - それはどんな複雑なサーバーセットアップ問題よりもむしろパスまたはスペルミスである可能性があります。コンソールのエラーは赤いニシンです、最初に404のためにネットワークタブをチェックする必要があります。

ここで提供される答えの中には正しくないいくつかの解決策があります。 type="text/html"を追加すること、またはhrefをsrcに変更することは答えではありません。

あなたがすべての属性を持っていて、バリデータとあなたのIDEの中で最も妥当なものを検証するのであれば、メディアの値を提供し、relをstylesheetにするべきです

    <link rel="stylesheet" href="css/additional.css" type="text/css" media="all">
0
Henry's Cat

この問題は、reactjsまたはangularにcliツールを使用している場合に発生します。したがって、重要なのはこれらのツールから最終ビルド全体をコピーすることです。 ...ビルドフォルダー全体を取り出してバックエンドサーバープロジェクトのアセットフォルダーにダンプし、AngularやReactjsが同梱されているサーバーではなくバックエンドサーバーから参照します。それ以外の場合は使用しています。特定のAPIサーバーからのフロントエンドとして

0
ndoty

私は自分のWindowsマシンを再起動しようとし、 "npm i"を再インストールしました。

それは私のために働きました。

0
verma

ブートストラップスタイルが読み込まれない＃3411

https://github.com/angular/angular-cli/issues/3411

  1. Bootstrap v。3.3.7をインストールしました。

    npm install bootstrap --save

  2. それから、Angular-cli.jsonファイルのapps[0].scriptsに必要なスクリプトファイルを追加しました。

    "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
],

// And the Bootstrap CSS to the apps[0].styles array

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
],

  3. サーバーを再起動しました

それは私のために働きました。

0
HSN KH

認証の問題がありますBuddy：

次の手順を試してください。

  1. ISSに移動します - >リストされているプロジェクトを検索します - >それをクリックします - >右側のペインのアクションの下にあるパーミッションの編集をクリック
  2. プロジェクトのプロパティウィザードが表示されます。証券をクリック
  3. グループまたはユーザー名の下 - >「認証済みユーザー」と表示されている場合は、認証されていない場合は認証されています。
  4. あなたがそれを追加すると（あなたの自己またはあなたが会社で働いているならあなたの管理者の助けを借りて:)）、ウェブサイトはリソースのロードを開始します。 ISSでプロジェクトを再起動する必要があるかもしれません。

ありがとう

0
Rakesh

。tsファイルの再保存（Ionicの再構築を強制）で解決しました。

それは本当に理にかなっていない...しかし、それが機能する限り、誰を判断するのか？

ここで、この回避策を見ました：ionic/angular2-MIMEタイプ（ 'text/html '）はサポートされていません

0
luciomonter

私は同じ問題を抱えていました、そして私の場合私は私達が手動でhtmlファイルにCSSファイルをインポートしようとしていたという事実が原因でしたwebpackによって使用されるエントリポイントJSファイルにインポートされます。

手動でHTMLに書き込まれるのではなく、スタイルシートがメインのJSファイルにインポートされたときには、すべて正常に機能していました。

0
Magnus

このエラーのもう1つの理由は、CSSファイルのアクセス許可が正しくないことです。私の場合、Gitファイルをルートユーザーとしてプッシュしたために、所有権がルートユーザーに変更されたため、ファイルにアクセスできませんでした。

0
apostl3pol