Stylesheet tidak dimuat karena tipe MIME

384

Saya sedang mengerjakan situs web yang digunakan gulpuntuk kompilasi dan sinkronisasi browser agar browser disinkronkan dengan perubahan saya.

Tugas tegukan mengkompilasi semuanya dengan benar, tetapi di situs web, saya tidak dapat melihat gaya apa pun, dan konsol menampilkan pesan kesalahan ini:

Menolak untuk menerapkan gaya dari ' http: // localhost: 3000 / aset / styles / custom-style.css ' karena jenis MIME-nya ('teks / html') bukan tipe MIME stylesheet yang didukung, dan pemeriksaan ketat MIME diaktifkan.

Sekarang, saya tidak begitu mengerti mengapa ini terjadi.

HTML menyertakan file seperti ini (yang saya yakin benar):

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

Dan stylesheet adalah gabungan antara Bootstrap & gaya font-mengagumkan untuk saat ini (belum ada yang kustom).

Path juga benar, karena ini adalah struktur folder:

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

Tapi saya terus mendapatkan kesalahan.

Apa itu? Apakah ini sesuatu (mungkin pengaturan?) Untuk gulp / browsersync mungkin?

Nick
sumber
Saya mendapatkan ini ketika stylesheet tertaut saya dimulai dengan tag html <style ... bukan hanya langsung masuk ke aturan gaya. Saya juga mendapatkan ini ketika menautkan file html yang kemudian dimuat (AngularJS) jadi saya beralih untuk memuat secara dinamis saat memuat halaman melalui JavaScript dan masalahnya hilang.
Newclique
82
Ini terjadi ketika Anda menetapkan URL yang salah ke file atau ketika server Anda tidak dikonfigurasi dengan benar. Dalam hasilnya, browser TIDAK mendapatkan stylesheet, tetapi mendapat beberapa HTML dengan status 404 dan dengan header "Content-Type". Karena peramban mendapatkan sesuatu dari server, ia tidak memberi tahu Anda tidak ada balasan, tetapi ia memberi tahu Anda jenis file MIME salah. Cara tercepat untuk memeriksanya adalah dengan mencoba membuka file secara langsung http://localhost:3000/assets/styles/custom-style.cssdi tab baru.
RussCoder
6
Bagi saya itu adalah kasus yang dijelaskan oleh RussCoder. Alasan di balik ini adalah bahwa saya menggunakan Angular dan lupa untuk menambahkan file css ke kemasan gaya di angular.json. Jadi itu diabaikan saat membangun aplikasi.
Jana
1
Saya dapat memperbaiki masalah ini dengan konfigurasi keamanan pegas. Itu memblokir akses ke folder sumber daya.
sndu
2
proxy.conf.jsonPenyiapan yang buruk telah mengarahkan kami ke kesalahan aneh ini, karena permintaan penerusan ke API backend tidak berfungsi dengan benar, sehingga respons kesalahan HTML.
ktsangop

Jawaban:

139

Untuk aplikasi Node.js, periksa konfigurasi Anda:

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

Perhatikan bahwa /publictidak ada garis miring di akhir, jadi Anda harus memasukkannya dalam opsi href dari HTML Anda:

href="/css/style.css">

Jika Anda memasukkan garis miring ( /public/) maka Anda bisa melakukannya href="css/style.css".

JPaulino
sumber
href = "/ assets / style.css"> dalam kasus saya menyelesaikan masalahnya!
Sergio Guerjik
127

Masalahnya, saya pikir, adalah dengan perpustakaan CSS yang dimulai dengan komentar.

Saat dalam pengembangan, saya tidak mengecilkan file dan saya tidak menghapus komentar. Ini berarti bahwa stylesheet dimulai dengan beberapa komentar, membuatnya dilihat sebagai sesuatu yang berbeda dari CSS.

Menghapus pustaka dan memasukkannya ke file vendor (yang SELALU diperkecil tanpa komentar) menyelesaikan masalah.

Sekali lagi, saya tidak 100% yakin ini adalah perbaikan, tetapi masih merupakan kemenangan bagi saya karena berfungsi seperti yang diharapkan sekarang.

Nick
sumber
4
Setengah diperbaiki karena jika Anda tidak ingin memasukkan semua css ini ke vendor, apa yang harus Anda lakukan? Minimalkan node_modules setiap kali Anda menguji aplikasi Anda? Doh ... Apakah Anda menemukan sesuatu untuk hanya mengkompilasi modul tertentu?
SteamFire
1
Dalam proses kompilasi saya, file vendor dibuat hanya pada build dan kemudian saya hanya melihat perubahan pada file yang saya kerjakan (yang biasanya tidak ada yang masuk ke vendor). Ini berarti bahwa build pertama sedikit lebih lambat, tetapi kemudian saya hanya mengkompilasi file saya tanpa minification yang tidak memperlambat proses untuk saya
Nick
3
Saya mengalami masalah yang sama dan menemukan bahwa saya mencoba memuat versi yang diperkecil dari file yang ada di server sebagai file yang tidak diperkecil. Jadi, saya mencoba memuat "custom-style.min.css" ketika file di server "custom-style.css". Setelah saya mengubah tautan untuk memuat sumber daya yang benar, semuanya bekerja dengan baik.
Programmer Dan
Masalahnya tidak terbatas pada CSS. Saya juga mendapat 404 pada file JS yang disebabkan oleh komentar di baris pertama.
Hitam
80

Kesalahan ini juga dapat muncul ketika Anda tidak merujuk ke file CSS Anda dengan benar.

Misalnya, jika tag tautan Anda

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

tetapi file CSS Anda dinamai style.css(tanpa yang kedua) maka ada kemungkinan Anda akan melihat kesalahan ini.

John Deverall
sumber
4
Persis apa yang terjadi pada saya. Saya mencoba setiap jawaban di sini (ubah mimetype, hapus komentar CSS, ubah konfigurasi node.js ...). Yang harus saya lakukan adalah memperbaiki kesalahan ketik pada nama CSS. Doh!
AJPerez
5
Untuk menambah jawaban ini, pastikan gulp benar-benar menemukan file css dan menyalurkannya ke dist Anda. Setiap kali saya mendapatkan kesalahan ini, itu karena saya mengacaukan jalur saya ke file css dan itu tidak ada di direktori build.
LAdams87
5
Yap, sama untuk saya, kesalahan ketik yang sederhana dan bodoh. Saya pikir apa yang dilakukannya sehingga server mengirim halaman respon 404, jadi browser Anda mendapatkan halaman 404 dan memberitahu Anda bahwa itu bukan css yang tepat ... yang benar.
tanou
62

Dalam kebanyakan kasus, ini bisa jadi jalur file CSS salah . Jadi server web kembali status: 404dengan beberapa jenis Not Foundmuatan muatan html.

Browser mengikuti jalur (salah) ini dari <link rel="stylesheet" ...>tag dengan tujuan menerapkan gaya CSS. Tetapi jenis konten yang dikembalikan bertentangan sehingga mencatat kesalahan.

Masukkan deskripsi gambar di sini

Tharaka
sumber
Masalah saya adalah bahwa jalan tidak valid. Tapi, jalur buruk ini disebabkan oleh href dasar yang ditetapkan untuk proyek sudut saya salah. Jika orang lain mulai melihat kesalahan ini setelah memperbarui basis href Anda, mungkin itu penyebabnya.
Krejko
1
Terima kasih telah mengambil kesulitan untuk mendokumentasikan sepenuhnya dan jelas bagaimana 404 kesalahan pada file CSS dapat menghasilkan pesan kesalahan membingungkan ini (awalnya)
Velojet
1
cara lain untuk memecahkan masalah, rekatkan url tempat Anda mendapatkan kesalahan ini di tab lain, jika Anda tidak melihat CSS, ini kemungkinan merupakan masalah
BlackICE
Daripada Anda untuk petunjuk Anda
Jason Zhou
52

Buat folder tepat di bawah / di atas file style.css sesuai struktur Angular dan berikan tautan seperti <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.

Masukkan deskripsi gambar di sini

Gopi GA
sumber
23
Mengapa ini bekerja? Kesalahan menyatakan bahwa "teks / html" bukan tipe MIME yang didukung.
James Bateson
6
Dalam kasus saya kesalahan hilang, gaya css, bagaimanapun, tidak diterapkan ..: /
Andru
2
Saya memang menghabiskan lebih banyak waktu membaca tentang masalah ini dan mengubah jenis file css ibto sesuatu yang lain dapat menyebabkan masalah serius, seperti css dibaca sebagai html oleh server
Nick
Di AngularDart, root untuk index.html adalah folder 'web' bukan folder utama proyek. Jadi semua file css harus ada di dalam folder web. Seperti ini "[projectfolder] \ web [yourcssfileshere]". Jadi, jika Anda mencoba mengimpor file css yang terletak di luar folder web itu tidak akan ditemukan.
Wael
40

Saya memiliki kesalahan ini untuk templat Bootstrap.

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

Lalu saya menghapus rel="stylesheet"dari tautan, yaitu:

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

Dan semuanya bekerja dengan baik. Coba ini jika Anda menggunakan template Bootstrap.

Amandeep Saini
sumber
3
Tangkapan yang bagus. Kesalahan hilang sekarang.
Kaya
1
Menurut Living Standard (4.2.4) , "Elemen tautan harus memiliki atribut rel atau atribut itemprop, tetapi tidak keduanya." Jadi, menghapus relatribut hanya menghilangkan fungsionalitas termasuk stylesheet.
Artjom B.
ini anehnya bekerja untuk saya.
35

Saya telah mengubah 'href' -> 'src' saya. Jadi dari ini:

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

untuk ini:

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

Itu berhasil. Saya tidak tahu mengapa, tetapi itu berhasil.

Sebastian Voráč
sumber
1
Meskipun itu berhasil bagi saya juga, apakah ini atribut yang valid?
sr9yar
1
@ sr9yar Anda benar bahwa menurut validator.w3.org tidak sah untuk memiliki tautan src, jadi itu baik sebagai perbaikan terbaru cepat, tetapi segera setelah Anda memiliki sedikit waktu lagi saya akan menyarankan untuk mencari lagi solusi yang valid.
Sebastian Voráč
20

Komentar dalam file Anda akan trip ini. Beberapa minifiers tidak akan menghapus komentar.

JUGA

Jika Anda menggunakan Node.js dan mengatur file statis Anda menggunakan expressseperti:

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

Anda perlu menangani file dengan benar.

Dalam kasus saya keduanya adalah masalah, jadi saya awali tautan CSS saya dengan "/css/styles.css".

Contoh:

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

Solusi ini sempurna karena jalur adalah masalah utama agar CSS tidak mendapatkan rendering

metal_jacke1
sumber
18

Saya hanya mereferensikan file CSS (tema Angular dalam kasus saya) di bagian gaya konfigurasi build Angular 6 saya di angular.json:

Masukkan deskripsi gambar di sini

Ini tidak menjawab pertanyaan, tetapi mungkin solusi yang cocok, seperti bagi saya.

dvlsc
sumber
3
Itulah jawaban yang benar untuk proyek Angular-CLI 6
Torsten Barthel
14

Seperti solusi yang disebutkan dalam posting ini, beberapa solusi bekerja untuk saya, tetapi CSS tidak berlaku pada halaman.

Cukup, saya baru saja memindahkan direktori "css" ke direktori "Assest /" dan semuanya berfungsi dengan baik.

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >
Jitendra G2
sumber
Luar biasa (Y) memperbaiki masalah saya
Chakri
12

Juga untuk orang lain yang menggunakan Angular-CLI dan menerbitkan ke sub-folder di server web, periksa jawaban ini:

Saat Anda menggunakan jalur non-root dalam domain, Anda harus memperbarui <base href="https://stackoverflow.com/">tag secara manual didist/index.html.

Dalam hal ini, Anda harus memperbarui ke <base href="https://stackoverflow.com/sub-folder/">

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

simonberry
sumber
10

Masalah saya adalah bahwa saya menggunakan webpack dan dalam tautan HTML CSS saya, saya memiliki jalur relatif, dan setiap kali saya menavigasi ke halaman bersarang, itu akan menyelesaikan ke jalur yang salah:

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

jadi solusi sederhana adalah menghapus .karena tambang adalah aplikasi satu halaman .

Seperti ini:

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

jadi selalu memutuskan untuk /index.css

Jared
sumber
Ya, dalam kasus saya, saya lupa menghapus jalur relatif ini dari file index.html saya dan menjalankan webpack dalam mode produksi. Jalur ini tidak diperlukan karena webpack menautkan file css secara dinamis melalui webpack.prod.js.
Kewal Shah
10

Saya punya masalah dengan situs yang saya tahu berfungsi online saat saya memindahkannya ke localhost dan PhpStorm.

Ini berfungsi dengan baik secara online:

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

Tetapi untuk localhost saya perlu menyingkirkan garis miring:

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

Jadi saya memperkuat beberapa jawaban yang sudah disediakan di sini - kemungkinan akan menjadi kesalahan jalur atau ejaan daripada masalah pengaturan server yang rumit. Kesalahan di konsol adalah herring merah; tab jaringan perlu diperiksa untuk 404 terlebih dahulu.

Di antara jawaban yang diberikan di sini adalah beberapa solusi yang tidak benar. Penambahan type="text/html"atau mengubah hrefke srcbukanlah jawaban.

Jika Anda ingin memiliki semua atribut sehingga memvalidasi pada pilih validator dan IDE Anda maka nilai media harus disediakan dan relseharusnya stylesheet, misalnya:

    <link rel="stylesheet" href="css/additional.css" type="text/css" media="all">
Kucing Henry
sumber
9

Saya tahu ini mungkin di luar konteks tetapi menautkan file yang tidak ada dapat menyebabkan masalah ini seperti yang terjadi pada saya sebelumnya.

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

Jika file ini tidak ada, Anda akan menghadapi masalah itu.

Safwat Fathi
sumber
8

Saya memiliki masalah yang sama.

Jika struktur proyek Anda seperti pohon berikut:

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

Saya sarankan untuk menambahkan potongan kode berikut di server.js:

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

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

Catatan: Path adalah modul Node.js bawaan, sehingga tidak perlu menginstal paket ini melalui npm.

Mostafa Ghadimi
sumber
7

Menambahkan ke daftar jawaban yang panjang, masalah ini juga terjadi pada saya karena saya tidak menyadari jalannya salah dari sudut pandang browser-sync.

Dengan struktur folder sederhana ini:

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

yang hrefdi dalam atribut <link>di index.htmlharus app/styles/style.cssdan tidakstyles/style.css

Stig Perez
sumber
Memang, salah ketik saja di jalan memberi saya kesalahan yang sama.
Julesezaar
wow ini berhasil untuk saya, terima kasih banyak. Saya benar-benar akan menyerah
Vash
7

Anda dapat membuka alat Google Chrome, memilih tab jaringan, memuat kembali halaman Anda dan menemukan permintaan file CSS dan mencari apa yang ada di dalam file.

Mungkin Anda melakukan sesuatu yang salah ketika Anda menggabungkan dua pustaka dalam file Anda, termasuk beberapa karakter atau header yang tidak benar untuk CSS?

Yunior González Santana
sumber
1
sayangnya saya memang mencobanya tetapi tidak benar-benar membantu, permintaan gagal seketika dan hanya memiliki url permintaan (yang benar)
Nick
6

Jika Anda menggunakan Express tanpa JS coba dengan:

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

Sebagai contoh, file CSS saya ada di public/stylesheets/app.css

Tal Hakmon
sumber
5

Untuk aplikasi Node.js, cukup gunakan ini setelah mengimpor semua modul yang diperlukan dalam file server Anda:

app.use(express.static("."));
  • express.static fungsi middleware bawaan di Express dan ini di file .html Anda: <link rel="stylesheet" href="style.css">
Purav Barot
sumber
3
Anda tidak benar-benar ingin melayani kode server Anda kepada publik, bukan?
Ki Jéy
5

Saya mendapatkan masalah yang sama dan kemudian saya memeriksa bahwa saya menulis:

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

Lalu aku berubah menjadi

<base href="/">

Dan kemudian itu bekerja dengan baik.

VIKAS KOHLI
sumber
4

Hapus rel = "stylesheet" dan tambahkan type = "text / html". Jadi akan terlihat seperti ini -

<link  href="styles.css" type="text/html" />
Sanjay Choubey
sumber
Akhirnya jawaban itu berhasil buat saya. Terima kasih!
Richard Witherspoon
4

Dalam kasus saya, ketika saya menggunakan paket secara langsung, saya mengeluarkannya dari folder HTML publik. Itu karena suatu alasan.

Tetapi ternyata pemeriksaan tipe MIME yang ketat telah diaktifkan, dan saya tidak terlalu yakin apakah itu ada di pihak saya atau oleh perusahaan tempat saya hosting.

Tapi begitu saya memindahkan folder styling di direktori yang sama dengan file index.php saya berhenti mendapatkan kesalahan, dan styling diaktifkan dengan sempurna.

Jabulani
sumber
4

Gaya bootstrap tidak memuat # 3411

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

  1. Saya menginstal Bootstrap v. 3.3.7

    npm install bootstrap --save
  2. Kemudian saya menambahkan file skrip yang diperlukan ke apps[0].scriptsdalam file 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. Saya mulai lagi ng melayani

Ini berhasil untuk saya.

HSN KH
sumber
4

jika browser tidak dapat menemukan file css terkait, itu bisa memberikan kesalahan ini.

Jika Anda menggunakan aplikasi Angular Anda tidak harus meletakkan jalur file css di index.html

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

Anda bisa meletakkan jalur file css terkait di file styles.css.

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";
Ahmet Arslan
sumber
Ini adalah perbaikan untuk saya, hapus tautan href dari index.html dan gunakan metode impor di styles.scss.
IronWorkshop
3

Salah satu alasan utama untuk masalah ini adalah file CSS yang mencoba memuat bukan file CSS yang valid.

Penyebab:

  • Jenis MIME tidak valid
  • Memiliki kode JavaScript di dalam style sheet - (dapat terjadi karena konfigurasi bundler Webpack yang salah)

Periksa file yang Anda coba muat adalah style sheet CSS yang valid (dapatkan URL server file dari tab jaringan dan tekan tab baru dan verifikasi).

Info berguna untuk dipertimbangkan saat menggunakan <link> di dalam tag tubuh.

Meskipun memiliki linktag di dalam tubuh bukanlah cara standar untuk menggunakan tag. Tetapi kita dapat menggunakannya untuk optimasi halaman (informasi lebih lanjut: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ) / jika kasus penggunaan bisnis menuntut (ketika Anda menyajikan isi konten dan server yang dikonfigurasi untuk harus merender halaman HTML dengan konten yang disediakan).

Sambil menjaga di dalam tag tubuh kita harus menambahkan atribut itemPropertydi linktag seperti

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

Untuk informasi lebih lanjut tentang itemPropertylihat di /webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-document .

BALA
sumber
3

dengan masuk ke konsol browser saya> jaringan> style.css ... mengkliknya dan itu menunjukkan "tidak bisa mendapatkan / path / ke / my / CSS", ini mengatakan kepada saya bahwa tautan saya salah. saya mengubahnya ke jalur file CSS saya.

Path asli sebelum perubahan adalah localhost: 3000 / Contoh / publik / style.css mengubahnya menjadi localhost: 3000 / style.css menyelesaikannya.

jika Anda melayani file dari app.use (express.static (path.join (__ dirname, "publik"))); atau app.use (express.static ("publik")); server Anda akan meneruskan "folder itu" ke browser sehingga menambahkan tautan "/yourCssName.css" di browser Anda menyelesaikannya

Dengan menambahkan rute lain di tautan CSS peramban Anda, Anda akan memberi tahu peramban untuk mencari rute css yang ditentukan.

dalam ringkasan ... periksa ke mana tautan tautan CSS browser Anda menunjuk.

bahri noredine
sumber
2

Jika Anda mengatur Gaya dalam JavaScript sebagai:

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

Kemudian cukup ubah cssLint.type (dilambangkan dengan panah dalam deskripsi di atas) menjadi "MIME":

   cssLink.type = "MIME";

Ini akan membantu Anda untuk menyingkirkan kesalahan.

Shriram
sumber
2

Masalah ini terjadi ketika Anda menggunakan cli tool untuk reaksi atau sudut, jadi kuncinya adalah menyalin seluruh bangunan final dari alat-alat tersebut karena mereka menginisialisasi mereka sendiri server lite yang membingungkan URL Anda dengan server back-end yang Anda buat ... ambil seluruh folder pembangunan dan buang ke folder aset dari proyek server back end Anda dan ref mereka dari server back end Anda dan bukan server yang dikirimkan dengan Angular atau Reactjs. Jika tidak, Anda menggunakannya sebagai ujung depan dari server tertentu. Server API

ndoty
sumber
2

Saya menemukan masalah ini memiliki masalah yang sama menambahkan tampilan kustom dan rasa ke aliran pengguna Azure B2C. Apa yang saya temukan adalah bahwa root yang dimaksud halaman html adalah ../oauth/v2 (yaitu jalur server oauth) daripada jalur ke bob penyimpanan saya.

Menempatkan di url penuh halaman memperbaiki masalah untuk saya.

Liam
sumber
2

Periksa apakah kompresi Anda diaktifkan atau dinonaktifkan. Jika Anda menggunakannya atau seseorang mengaktifkannya maka app.use(express.static(xxx))tidak akan membantu. Pastikan server Anda memungkinkan untuk kompresi.

Saya mulai melihat kesalahan serupa ketika saya menambahkan Brotli dan Compression Plugins ke Webpack saya. Maka server Anda perlu mendukung jenis kompresi konten ini juga.

Jika Anda menggunakan Express maka yang berikut ini akan membantu:

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

Modul disebut: express-static-gzip

Pengaturan saya adalah:

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