- Konu sahibi
- #1
Rails’te CSS ve JavaScript’in yüklenmemesi; dosya bağlantısının eksik olması, yanlış yol, derlenmemiş dosyalar veya sunucunun dosya yerine hata sayfası döndürmesi gibi nedenlerden kaynaklanabilir. Önce tarayıcının hangi isteği yaptığını ve ne yanıt aldığını bulun; ardından projenin kullandığı asset yapısına göre bağlantıyı, derlemeyi veya sunucu ayarını düzeltin. Dosya başarıyla indirilse bile CSS’in uygulanması ya da JavaScript’in çalışması ayrıca kontrol edilmelidir.
Yanıt türü de önemlidir: CSS için
Rails’te layout, sayfaları çevreleyen ortak HTML şablonudur. Genellikle
Örneğin import map kullanan bir projede layout’ta aşağıdakilere benzer çağrılar bulunabilir:
Bu, tüm Rails projelerine yapıştırılacak evrensel bir şablon değildir. Projenizde import map yerine JavaScript derleyicisi veya başka bir düzen kullanılıyorsa mevcut yapılandırmanın ürettiği giriş dosyasına uygun yardımcıyı kullanın.
CSS için de dosyanın yalnızca
Değişikliği ilgili kaynak veya layout dosyasına kaydedin ve sayfayı yeniden yükleyin. Ağ panelinde artık beklenen isteğin görünmesi, bağlantının oluşturulduğunu gösterir; yanıtı ve dosyanın etkisini yine kontrol edin.
Sorun yalnızca geliştirme ortamındaysa, projede CSS veya JavaScript’i izleyip yeniden derleyen ayrı bir işlem gerekip gerekmediğine bakın.
Sorun yalnızca production ortamındaysa, asset’lerin dağıtım sırasında üretilip sunulduğunu doğrulayın. Projenin dağıtım sürecinde kullanılan ortam değişkenleri ve bağımlılıklar hazırken, genellikle ön derleme şu komutla yapılır:
Komutu yerelde çalıştırmak, çıktıları kendiliğinden uzak sunucuya taşımaz. Dağıtım günlüklerinde komutun başarıyla bittiğini, üretilen dosyaların uygulamanın sunulduğu ortama taşındığını ve web sunucusu veya CDN’in istenen asset yolunu bu dosyalara yönlendirdiğini kontrol edin. HTML’nin istediği parmak izli dosya adıyla dağıtılan dosya eşleşmiyorsa uygulama kodu ve asset çıktısını aynı sürümden yeniden dağıtın. Önbellek temizliği ancak doğru dosyanın dağıtıldığını doğruladıktan sonra anlamlıdır.
CSS yanıtının içinde beklediğiniz kural varsa geliştirici araçlarında ilgili öğenin stillerini inceleyin: başka bir seçici kuralı eziyor ya da seçici öğeyle eşleşmiyor olabilir. JavaScript için konsoldaki ilk hatayı ve dosyanın gerçekten beklenen kodu içerip içermediğini inceleyin. Modül veya bağımlılık hatasında yalnız giriş dosyasının değil, onun yüklemeye çalıştığı dosyaların isteklerine de bakın.
Düzeltmeden sonra sayfayı yeniden yükleyin ve hem dosya yanıtını hem sayfadaki davranışı kontrol edin. Sorun devam ederse geliştirici veya sunucu yöneticisine ortamı, başarısız isteğin yolunu, durum kodunu, ilgili konsol ve derleme hatasını iletip o dosyanın dağıtımını ve sunulmasını incelemesini isteyin. Günlükleri paylaşmadan önce çerezleri, erişim anahtarlarını ve diğer hassas bilgileri çıkarın; eklediğiniz geçici tanılama çıktısını iş bitince kaldırın.
Önce başarısız isteği bulun
- Sorunlu sayfayı açın, tarayıcının geliştirici araçlarında Network veya Ağ paneline geçin ve sayfayı yeniden yükleyin.
- CSS ve JavaScript isteklerini inceleyin. Beklediğiniz dosyaya ait istek yoksa sayfanın HTML çıktısında ilgili
linkveyascriptetiketinin bulunup bulunmadığına bakın. - İstek varsa durum kodunu, yanıtın içeriğini ve
Content-Typebaşlığını inceleyin. Ardından Console veya Konsol panelindeki hata mesajlarını kontrol edin.
| Gözlem | Anlamı ve ilk kontrol |
|---|---|
| İstek yok | Layout veya sayfada ilgili dosyayı çağıran etiket eksik olabilir. |
| 404 | İstenen yol veya dağıtılan dosya bulunamıyor; dosya adını ve sunucuya çıkan dosyaları karşılaştırın. |
| 200, fakat yanıt HTML | Dosya yerine yönlendirme, giriş veya hata sayfası dönmüş olabilir; yanıt içeriğini ve yönlendirmeleri inceleyin. |
| 200 ve doğru dosya | İndirme başarılıdır; bu, CSS’in uygulandığını veya JavaScript’in hatasız çalıştığını kanıtlamaz. |
text/css, JavaScript için text/javascript beklenir. Yanlış içerik türü tarayıcının dosyayı reddetmesine yol açabilir. Özellikle yanıt HTML ise güvenlik başlıklarını kaldırmak yerine sunucunun neden gerçek dosyayı döndürmediğini düzeltin.Layout ve projenin asset düzenini kontrol edin
Rails’te layout, sayfaları çevreleyen ortak HTML şablonudur. Genellikle
app/views/layouts/application.html.erb dosyasını açarak CSS ve JavaScript için kullanılan yardımcıları inceleyebilirsiniz. Ancak sorunlu sayfa farklı bir layout kullanıyor veya layout’u devre dışı bırakıyor olabilir; bu durumda o sayfanın gerçek HTML çıktısını esas alın.Örneğin import map kullanan bir projede layout’ta aşağıdakilere benzer çağrılar bulunabilir:
Kod:
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>Bu, tüm Rails projelerine yapıştırılacak evrensel bir şablon değildir. Projenizde import map yerine JavaScript derleyicisi veya başka bir düzen kullanılıyorsa mevcut yapılandırmanın ürettiği giriş dosyasına uygun yardımcıyı kullanın.
Gemfile, varsa config/importmap.rb, package.json ve Procfile.dev dosyaları kullanılan yöntemi anlamanıza yardımcı olur.CSS için de dosyanın yalnızca
app/assets/stylesheets altında bulunması, her projede otomatik olarak sayfaya ekleneceği anlamına gelmez. Layout’un çağırdığı giriş dosyasını ve projenin CSS derleme veya içe aktarma düzenini inceleyin. Dosya adındaki büyük-küçük harf farklarını da özellikle sunucuda kontrol edin.Değişikliği ilgili kaynak veya layout dosyasına kaydedin ve sayfayı yeniden yükleyin. Ağ panelinde artık beklenen isteğin görünmesi, bağlantının oluşturulduğunu gösterir; yanıtı ve dosyanın etkisini yine kontrol edin.
Derleme ve dağıtım farklarını ayırın
Sorun yalnızca geliştirme ortamındaysa, projede CSS veya JavaScript’i izleyip yeniden derleyen ayrı bir işlem gerekip gerekmediğine bakın.
Procfile.dev bulunan projelerde tanımlı süreçleri kontrol edin; proje bin/dev kullanacak şekilde hazırlanmışsa uygulamayı bu komutla başlatın. Terminaldeki derleme hatalarını düzeltip dosyayı yeniden kaydedin; üretilen çıktının güncellendiğini ve tarayıcıya yeni içeriğin geldiğini kontrol edin.Sorun yalnızca production ortamındaysa, asset’lerin dağıtım sırasında üretilip sunulduğunu doğrulayın. Projenin dağıtım sürecinde kullanılan ortam değişkenleri ve bağımlılıklar hazırken, genellikle ön derleme şu komutla yapılır:
Bash:
RAILS_ENV=production bin/rails assets:precompileKomutu yerelde çalıştırmak, çıktıları kendiliğinden uzak sunucuya taşımaz. Dağıtım günlüklerinde komutun başarıyla bittiğini, üretilen dosyaların uygulamanın sunulduğu ortama taşındığını ve web sunucusu veya CDN’in istenen asset yolunu bu dosyalara yönlendirdiğini kontrol edin. HTML’nin istediği parmak izli dosya adıyla dağıtılan dosya eşleşmiyorsa uygulama kodu ve asset çıktısını aynı sürümden yeniden dağıtın. Önbellek temizliği ancak doğru dosyanın dağıtıldığını doğruladıktan sonra anlamlıdır.
Dosya geliyor ama değişiklik görünmüyorsa
CSS yanıtının içinde beklediğiniz kural varsa geliştirici araçlarında ilgili öğenin stillerini inceleyin: başka bir seçici kuralı eziyor ya da seçici öğeyle eşleşmiyor olabilir. JavaScript için konsoldaki ilk hatayı ve dosyanın gerçekten beklenen kodu içerip içermediğini inceleyin. Modül veya bağımlılık hatasında yalnız giriş dosyasının değil, onun yüklemeye çalıştığı dosyaların isteklerine de bakın.
Düzeltmeden sonra sayfayı yeniden yükleyin ve hem dosya yanıtını hem sayfadaki davranışı kontrol edin. Sorun devam ederse geliştirici veya sunucu yöneticisine ortamı, başarısız isteğin yolunu, durum kodunu, ilgili konsol ve derleme hatasını iletip o dosyanın dağıtımını ve sunulmasını incelemesini isteyin. Günlükleri paylaşmadan önce çerezleri, erişim anahtarlarını ve diğer hassas bilgileri çıkarın; eklediğiniz geçici tanılama çıktısını iş bitince kaldırın.
