Stylesheet tidak dimuat karena tipe MIME

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?

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

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.

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.

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.

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

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.

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.

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

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

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

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

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

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

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

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.

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.

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

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?

Jika Anda menggunakan Express tanpa JS coba dengan:

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

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

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

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.

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

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

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.

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.

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

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 .

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.

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.

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

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.

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']
}