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

私はを使用gulpして、変更とブラウザーの同期を維持するためのコンパイルとブラウザーの同期に使用するWebサイトに取り組んでいます。

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

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

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

HTMLには次のようなファイルが含まれています（これは正しいと確信しています）。

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

そしてスタイルシートは今のところBootstrapとfont-awesomeスタイルの融合です（まだカスタムはありません）。

これもフォルダ構造なので、パスも正しいです。

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

しかし、エラーが発生し続けます。

どうなり得るか？これはおそらくgulp / browsersyncの何かですか？

Node.jsアプリケーションの場合、構成を確認します。

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

/public末尾にスラッシュがないので、HTMLのhrefオプションに含める必要があることに注意してください。

href="/css/style.css">

スラッシュ（/public/）を含めた場合は、そのままでかまいませんhref="css/style.css"。

問題は、コメントで始まるCSSライブラリにあると思います。

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

ライブラリを削除し、それをベンダーファイル（コメントなしで常に縮小される）に入れると、問題が解決しました。

繰り返しますが、これが修正であるかどうかは100％わかりませんが、今のところ期待どおりに機能するので、私にとってはまだ勝利です。

このエラーは、CSSファイルを適切に参照していない場合にも発生する可能性があります。

たとえば、リンクタグが

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

しかし、CSSファイルにstyle.css（2番目のsを付けずに）名前を付けると、このエラーが表示される可能性が高くなります。

ほとんどの場合、これは単にCSSファイルのパスが間違っている可能性があります。Webサーバが返すのでstatus: 404、いくつかとNot Foundの内容ペイロードhtmlタイプ。

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

Angular構造に従って、style.cssファイルのすぐ上/上にフォルダーを作成し、のようなリンクを提供し<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">ます。

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

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

次にrel="stylesheet"、リンクからを削除しました。

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

そして、すべてが正常に動作します。Bootstrapテンプレートを使用している場合は、これを試してください。

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

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

これに：

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

動いた。理由はわかりませんが、それでうまくいきました。

ファイル内のコメントはこれをトリップします。一部の縮小版ではコメントが削除されません。

また

Node.jsを使用し、次のexpressように静的ファイルを設定した場合：

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

ファイルに適切に対処する必要があります。

私の場合はどちらも問題でしたので、CSSリンクの先頭に「/css/styles.css」を付けました。

例：

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

パスはCSSがレンダリングされない主な問題であるため、このソリューションは完璧です。

Angular 6ビルド構成のangular.json のスタイルセクションでCSSファイル（私の場合はAngularテーマ）を単に参照しました。

これは質問の答えにはなりませんが、私にとっては適切な回避策である可能性があります。

この投稿で述べた解決策のように、いくつかの解決策は私にはうまくいきましたが、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" >

また、Angular-CLIを使用し、ウェブサーバーのサブフォルダーに公開する他のユーザーについては、次の回答を確認してください。

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

この場合、更新する必要があります <base href="https://stackoverflow.com/sub-folder/">

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

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

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

.私が単一ページのアプリケーションなので、簡単な解決策はを削除することでした。

このような：

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

常に解決する /index.css

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">

私はそれが文脈から外れているかもしれないことを知っていますが、存在しないファイルをリンクすると以前に起こったようにこの問題を引き起こす可能性があります。

<!-- bootstrap grid -->
<link rel="stylesheet" href="./css/bootstrap-grid.css" />

このファイルが存在しない場合は、その問題が発生します。

私も同じ問題を抱えていました。

プロジェクトの構造が次のようなツリーの場合：

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を介してこのパッケージをインストールする必要はありません。

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

この単純なフォルダー構造を考えると：

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

href内部の属性<link>ではindex.htmlなければならないapp/styles/style.cssとありませんstyles/style.css

Google Chromeツールを開き、ネットワークタブを選択し、ページをリロードして、CSSのファイルリクエストを見つけ、ファイル内にあるものを探します。

CSSに正しくない文字やヘッダーなど、ファイル内の2つのライブラリをマージしたときに何か問題があったのでしょうか？

JSなしでExpressを使用する場合は、以下を試してください。

app.use(express.static('public'));

例として、私のCSSファイルは public/stylesheets/app.css

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

app.use(express.static("."));

• Expressのexpress.static組み込みミドルウェア関数と、これは.htmlファイルにあります：<link rel="stylesheet" href="style.css">

私は同じ問題を得て、私が書いたことを確認しました：

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

それから私は

<base href="/">

そして、それはうまくいきました。

rel = "stylesheet"を削除し、type = "text / html"を追加します。だから、このようになります-

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

私の場合、パッケージをライブで展開しているときに、パブリックHTMLフォルダーからパッケージを取り出しました。それは理由があった。

しかし、どうやら厳格なMIMEタイプチェックが有効になっているようで、自分の側にあるのか、ホストしている会社の側にあるのかはよくわかりません。

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

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

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

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

   npm install bootstrap --save

2. 次にapps[0].scripts、angular-cli.jsonファイルに必要なスクリプトファイルを追加しました。

   "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. サーブを再開しました

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

ブラウザーが関連するcssファイルを見つけられない場合、このエラーが発生する可能性があります。

Angularアプリケーションを使用する場合、cssファイルパスをindex.htmlに置く必要はありません。

 <link href="xxx.css" rel="stylesheet"> -->

関連するCSSファイルパスをstyles.cssファイルに配置できます。

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

この問題の主な理由の1つは、ロードしようとしているCSSファイルが有効なCSSファイルではないことです。

原因：

• 無効なMIMEタイプ
• スタイルシート内にJavaScriptコードがある-（Webpackバンドル設定が正しくないために発生する可能性があります）

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

bodyタグ内で<link>を使用する際の検討に役立つ情報。

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

bodyタグの内側を維持しながらitemProperty、次のlinkようにタグに属性を追加する必要があります

<body>
    <!-- … -->
      <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
    <!-- … -->
</body>`

詳しくitemPropertyは/webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-documentをご覧ください。

ブラウザのコンソール>ネットワーク> style.cssに移動して...クリックすると、「/ path / to / my / CSSを取得できません」と表示され、リンクが間違っていることがわかりました。これをCSSファイルのパスに変更しました。

変更前の元のパスはlocalhost：3000 / Example / public / style.cssでしたが、localhost：3000 / style.cssに変更すると解決しました。

app.use（express.static（path.join（__ dirname、 "public"）））からファイルを提供している場合）; またはapp.use（express.static（ "public"））; サーバーはブラウザに「そのフォルダ」を渡すため、ブラウザに「/yourCssName.css」リンクを追加すると解決します

ブラウザーのCSSリンクに他のルートを追加することで、指定したルートでCSSを検索するようブラウザーに指示することになります。

要約すると、ブラウザのCSSリンクが指す場所を確認します。

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";

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

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

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

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

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

Brotliおよび圧縮プラグインをWebpackに追加すると、同様のエラーが発生し始めました。次に、サーバーはこのタイプのコンテンツ圧縮もサポートする必要があります。

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

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

モジュールの名前：express-static-gzip

私の設定は：

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