Pertanyaan Stylesheet tidak dimuat karena tipe MIME


Saya sedang mengerjakan situs web yang menggunakan gulp untuk mengkompilasi dan sinkronisasi browser untuk menjaga browser tetap disinkronkan dengan perubahan saya.

Tugas tegukan mengumpulkan 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 / assets / styles / custom-style.css' karena ini   Jenis MIME ('text / html') bukan tipe stylesheet MIME yang didukung, dan   pemeriksaan MIME ketat diaktifkan.

Sekarang, saya tidak begitu mengerti mengapa ini terjadi.

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

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

dan stylesheet merupakan penggabungan 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.

Tahu apa itu? apakah ini sesuatu (mungkin pengaturan?) untuk gulp / browsersync mungkin?

Bantuan apa pun sangat dihargai, dan jangan ragu untuk meminta detail lebih lanjut jika diperlukan.

Terima kasih


76
2018-01-14 10:52


asal


Jawaban:


Ok saya pikir saya menemukan solusi dan saya menulisnya di sini untuk membantu orang lain.

Masalahnya saya pikir itu dengan perpustakaan CSS dimulai dengan komentar. Sementara di dev, saya tidak mengecilkan file dan saya tidak menghapus komentar, ini berarti bahwa stylesheet dimulai dengan beberapa komentar, menyebabkannya dilihat sebagai sesuatu yang berbeda dari css.

Menghapus pustaka dan memasukkannya ke dalam file vendor (yang SELALU minified tanpa komentar) memecahkan masalah.

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


45
2018-01-15 20:46



make a folder just below/above style.css file sesuai dengan struktur sudut dan menyediakan tautan seperti <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">  enter image description here


42
2018-03-09 06:41



Untuk Node.js aplikasi, periksa konfigurasi Anda:

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

Perhatikan itu /public tidak memiliki garis miring di bagian akhir, jadi Anda harus memasukkannya ke dalam opsi href html Anda:

href="/css/style.css">

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

Semoga itu membantu, Terima kasih


23
2018-02-07 14:54



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 diberi nama style.css (tanpa yang kedua) maka ada peluang baik bahwa Anda akan melihat kesalahan ini.


16
2018-05-04 11:34



Di Node.js, Silakan periksa file app.js. Ini memiliki entri seperti:

  1. app.use(express.static(__dirname);

atau

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

atau

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

Perhatikan bahwa dalam 1 dan 2 / publik tidak memiliki garis miring di bagian akhir, jadi Anda perlu memasukkannya ke dalam opsi href html Anda:

href="/css/style.css"

sebaliknya (opsi ke-3)

Anda harus memasukkannya ke dalam opsi href html Anda:

href="css/style.css"

7
2018-06-25 15:58



Juga bagi yang lain menggunakan angular-cli dan penerbitan ke sub-folder di webserver, periksa jawaban ini:

Saat Anda menerapkan ke jalur non-root dalam domain, Anda harus memperbarui secara manual <base href="/"> tag di Anda dist/index.html.

Dalam hal ini, Anda perlu memperbarui ke <base href="/sub-folder/"> 

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


5
2018-03-19 16:07



Saya hanya mereferensikan file css (tema sudut dalam kasus saya) di gaya bagian dari konfigurasi konfigurasi 6 sudut saya di angular.json

enter image description here

Ini tidak menjawab pertanyaan tapi mungkin solusi yang cocok, karena itu untuk saya. Semoga itu membantu.


5
2018-06-28 09:05



Komentar dalam file Anda akan menyebabkan hal ini. Sebagian orang kecil tidak akan menghapus komentar.

JUGA

Jika Anda menggunakan NodeJS dan mengatur file statis Anda menggunakan express seperti:

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

Anda harus benar-benar menangani file.

Dalam kasus saya keduanya adalah masalah jadi saya awalan tautan CSS saya ke "/css/styles.css"

Contoh:

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

4
2018-04-09 14:46



Anda dapat membuka alat chrome, memilih tab jaringan, memuat ulang halaman Anda dan menemukan permintaan file dari css dan mencari apa yang ada di dalam file. Mungkin Anda melakukan kesalahan ketika Anda menggabungkan dua pustaka di file Anda, termasuk beberapa karakter atau header yang tidak benar untuk css?


2
2018-01-14 11:00



masalah saya adalah bahwa saya menggunakan webpack dan di tautan html css saya memiliki jalur relatif, dan kapan saja saya akan menavigasi ke halaman yang disarangkan, yang akan menyelesaikan ke jalur yang salah:

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

jadi solusi sederhana adalah menghapus . karena saya adalah satu halaman aplikasi. seperti ini:

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

jadi selalu terpecahkan /index.css


2
2018-02-18 22:05