Saya sedang mengerjakan situs web yang digunakan gulp
untuk 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?
sumber
http://localhost:3000/assets/styles/custom-style.css
di tab baru.proxy.conf.json
Penyiapan yang buruk telah mengarahkan kami ke kesalahan aneh ini, karena permintaan penerusan ke API backend tidak berfungsi dengan benar, sehingga respons kesalahan HTML.Jawaban:
Untuk aplikasi Node.js, periksa konfigurasi Anda:
Perhatikan bahwa
/public
tidak ada garis miring di akhir, jadi Anda harus memasukkannya dalam opsi href dari HTML Anda:Jika Anda memasukkan garis miring (
/public/
) maka Anda bisa melakukannyahref="css/style.css"
.sumber
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.
sumber
Kesalahan ini juga dapat muncul ketika Anda tidak merujuk ke file CSS Anda dengan benar.
Misalnya, jika tag tautan Anda
tetapi file CSS Anda dinamai
style.css
(tanpa yang kedua) maka ada kemungkinan Anda akan melihat kesalahan ini.sumber
Dalam kebanyakan kasus, ini bisa jadi jalur file CSS salah . Jadi server web kembali
status: 404
dengan beberapa jenisNot Found
muatan muatanhtml
.Browser mengikuti jalur (salah) ini dari
<link rel="stylesheet" ...>
tag dengan tujuan menerapkan gaya CSS. Tetapi jenis konten yang dikembalikan bertentangan sehingga mencatat kesalahan.sumber
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">
.sumber
Saya memiliki kesalahan ini untuk templat Bootstrap.
Lalu saya menghapus
rel="stylesheet"
dari tautan, yaitu:Dan semuanya bekerja dengan baik. Coba ini jika Anda menggunakan template Bootstrap.
sumber
rel
atribut hanya menghilangkan fungsionalitas termasuk stylesheet.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.
sumber
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
express
seperti:Anda perlu menangani file dengan benar.
Dalam kasus saya keduanya adalah masalah, jadi saya awali tautan CSS saya dengan "/css/styles.css".
Contoh:
Solusi ini sempurna karena jalur adalah masalah utama agar CSS tidak mendapatkan rendering
sumber
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.
sumber
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.
sumber
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
sumber
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:
jadi solusi sederhana adalah menghapus
.
karena tambang adalah aplikasi satu halaman .Seperti ini:
jadi selalu memutuskan untuk
/index.css
sumber
Saya punya masalah dengan situs yang saya tahu berfungsi online saat saya memindahkannya ke localhost dan PhpStorm.
Ini berfungsi dengan baik secara online:
Tetapi untuk localhost saya perlu menyingkirkan garis miring:
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 mengubahhref
kesrc
bukanlah jawaban.Jika Anda ingin memiliki semua atribut sehingga memvalidasi pada pilih validator dan IDE Anda maka nilai media harus disediakan dan
rel
seharusnyastylesheet
, misalnya:sumber
Saya tahu ini mungkin di luar konteks tetapi menautkan file yang tidak ada dapat menyebabkan masalah ini seperti yang terjadi pada saya sebelumnya.
Jika file ini tidak ada, Anda akan menghadapi masalah itu.
sumber
Saya memiliki masalah yang sama.
Jika struktur proyek Anda seperti pohon berikut:
Saya sarankan untuk menambahkan potongan kode berikut di
server.js
:Catatan: Path adalah modul Node.js bawaan, sehingga tidak perlu menginstal paket ini melalui npm.
sumber
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:
yang
href
di dalam atribut<link>
diindex.html
harusapp/styles/style.css
dan tidakstyles/style.css
sumber
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?
sumber
Jika Anda menggunakan Express tanpa JS coba dengan:
Sebagai contoh, file CSS saya ada di
public/stylesheets/app.css
sumber
Untuk aplikasi Node.js, cukup gunakan ini setelah mengimpor semua modul yang diperlukan dalam file server Anda:
link rel="stylesheet" href="style.css">
sumber
Saya mendapatkan masalah yang sama dan kemudian saya memeriksa bahwa saya menulis:
<base href="./">
di index.htmlLalu aku berubah menjadi
Dan kemudian itu bekerja dengan baik.
sumber
Hapus rel = "stylesheet" dan tambahkan type = "text / html". Jadi akan terlihat seperti ini -
sumber
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.
sumber
Gaya bootstrap tidak memuat # 3411
https://github.com/angular/angular-cli/issues/3411
Saya menginstal Bootstrap v. 3.3.7
Kemudian saya menambahkan file skrip yang diperlukan ke
apps[0].scripts
dalam file angular-cli.json:Saya mulai lagi ng melayani
Ini berhasil untuk saya.
sumber
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
Anda bisa meletakkan jalur file css terkait di file styles.css.
sumber
Salah satu alasan utama untuk masalah ini adalah file CSS yang mencoba memuat bukan file CSS yang valid.
Penyebab:
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
link
tag 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
itemProperty
dilink
tag sepertiUntuk informasi lebih lanjut tentang
itemProperty
lihat di /webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-document .sumber
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.
sumber
Jika Anda mengatur Gaya dalam JavaScript sebagai:
Kemudian cukup ubah cssLint.type (dilambangkan dengan panah dalam deskripsi di atas) menjadi "MIME":
Ini akan membantu Anda untuk menyingkirkan kesalahan.
sumber
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
sumber
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.
sumber
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:
sumber