MIME türü nedeniyle stil sayfası yüklenmedi

gulpTarayıcı değişiklikleri benim senkronize tutmak için derleme ve tarayıcı senkronizasyonu için kullanılan bir web sitesi üzerinde çalışıyorum .

Yoksul görev her şeyi düzgün bir şekilde derler, ancak web sitesinde herhangi bir stil göremiyorum ve konsol şu hata mesajını gösteriyor:

MIME türü ('text / html') desteklenen bir stil sayfası MIME türü olmadığından ve katı MIME denetimi etkinleştirildiğinden ' http: // localhost: 3000 / asset / styles / custom-style.css ' öğesinden stil uygulanmasını reddetti .

Şimdi, bunun neden olduğunu gerçekten anlamıyorum.

HTML böyle bir dosya içerir (ki bu doğru olduğundan eminim):

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

Ve stil sayfası, Bootstrap ve font-awesome stilleri arasında birleştirme (henüz özel bir şey yok).

Klasör yapısı olduğu için yol da doğrudur:

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

Ama hatayı almaya devam ediyorum.

Ne olabilirdi? Bu gulp / browsersync için bir şey mi (belki bir ayar?)?

Node.js uygulamaları için yapılandırmanızı kontrol edin:

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

/publicSonunda eğik çizgi olmadığına dikkat edin , bu nedenle HTML'nizin href seçeneğinize eklemeniz gerekir:

href="/css/style.css">

Bir eğik çizgi ( /public/) eklediyseniz , bunu yapabilirsiniz href="css/style.css".

Sorun, sanırım, yorumlarla başlayan bir CSS kütüphanesindeydi.

Geliştirme aşamasındayken dosyaları küçültmüyorum ve yorumları kaldırmıyorum. Bu, stil sayfasının bazı yorumlarla başladığı ve CSS'den farklı bir şey olarak görülmesine neden olduğu anlamına geliyordu.

Kitaplığı kaldırmak ve bir satıcı dosyasına koymak (her zaman yorum yapılmadan küçültülür) sorunu çözdü.

Yine, bunun bir düzeltme olduğundan% 100 emin değilim, ama şimdi beklendiği gibi çalıştığı için hala benim için bir kazanç.

Bu hata, CSS dosyanıza düzgün bir şekilde başvurmadığınızda da ortaya çıkabilir.

Örneğin, bağlantı etiketiniz

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

ancak CSS dosyanızın adı style.css(saniye olmadan) bu hatayı görmeniz için iyi bir şans var.

Çoğu durumda, bu sadece CSS dosya yolu yanlış olabilir . Böylece web sunucusu status: 404bazı Not Foundiçerik yükü türleriyle döner html.

Tarayıcı <link rel="stylesheet" ...>, CSS stillerini uygulamak amacıyla bu (yanlış) yolu etiketten takip eder. Ancak döndürülen içerik türü, bir hatayı günlüğe kaydedecek şekilde çelişir.

Açısal yapıya göre style.css dosyasının hemen altında / üstünde bir klasör oluşturun ve benzeri bir bağlantı sağlayın <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.

Bir Bootstrap şablonu için bu hatayı aldım.

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

Sonra rel="stylesheet"bağlantı kaldırıldı , yani:

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

Ve her şey yolunda gidiyor. Bootstrap şablonları kullanıyorsanız bunu deneyin.

'Href' -> 'src'imi değiştirdim. Yani bundan:

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

buna:

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

İşe yaradı. Nedenini bilmiyorum, ama bu işi yaptı.

Dosyanızdaki yorumlar bunu açacaktır. Bazı küçültücüler yorumları kaldırmaz.

AYRICA

Eğer kullanırsanız node.js kullanarak ve statik dosyaları ayarlamak expressgibi:

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

Dosyaları düzgün bir şekilde ele almanız gerekir.

Benim durumumda her ikisi de sorun vardı, bu yüzden "/css/styles.css" ile CSS bağlantıları önek.

Misal:

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

Bu çözüm, CSS'nin oluşturulmaması için ana sorun olduğu için mükemmeldir

Angular.json'daki Angular 6 derleme yapılandırmamın stiller bölümünde CSS dosyasına (benim durumumda bir Açısal tema) başvurdum:

Bu soruya cevap vermiyor, ama benim için olduğu gibi uygun bir geçici çözüm olabilir.

Bu yayında belirtilen çözümlerden de belirtildiği gibi, bazı çözümler benim için çalıştı, ancak CSS sayfa için geçerli değil.

Basitçe, "css" dizinini "Assest /" dizinine taşıdım ve her şey iyi çalışıyor.

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >

Ayrıca Angular-CLI kullanan ve web sunucusundaki bir alt klasörde yayın yapan diğerleri için şu yanıtı kontrol edin:

Bir alan adında kök olmayan bir yola dağıtırken, <base href="https://stackoverflow.com/">alan adınızdaki etiketi manuel olarak güncellemeniz gerekir .dist/index.html.

Bu durumda, <base href="https://stackoverflow.com/sub-folder/">

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

Benim sorunum, webpack kullanıyordum ve HTML CSS bağlantımda göreceli bir yolum vardı ve her zaman yanlış yola çözümlenecek bir iç içe sayfaya giderdim:

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

bu yüzden basit çözüm .benimki tek sayfalık bir uygulama olduğu için kaldırmaktı .

Bunun gibi:

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

böylece her zaman /index.css

Bu sorunu localhost ve PhpStorm'a taşıdığımda çevrimiçi çalıştığını bildiğim bir siteyle yaşadım.

Bu çevrimiçi iyi çalıştı:

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

Ancak localhost için eğik çizgiden kurtulmam gerekiyordu:

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

Bu yüzden burada verilen birkaç cevabı pekiştiriyorum - herhangi bir karmaşık sunucu kurulum probleminden ziyade bir yol veya yazım hatası olması muhtemeldir. Konsoldaki hata kırmızı bir ringa balığıdır; önce ağ sekmesinin 404 için kontrol edilmesi gerekir.

Burada verilen cevaplar arasında doğru olmayan birkaç çözüm bulunmaktadır. Eklenmesi type="text/html"veya değiştirilmesi hrefiçin srccevap değildir.

Tüm niteliklere sahip olmak istiyorsanız, doğrulayıcıların ve en IDE'nizde en doğru şekilde geçerli kılınacaksa, medya değeri sağlanmalı ve relolmalıdır stylesheet:

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

Bağlam dışında olabileceğini biliyorum, ancak var olmayan bir dosyayı bağlamak bu sorunun daha önce başıma gelmesine neden olabilir.

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

Bu dosya yoksa bu sorunla karşılaşırsınız.

Aynı sorunu yaşadım.

Projenizin yapısı aşağıdaki ağaç gibiyse:

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

Aşağıdaki kod parçasını eklemenizi öneririm server.js:

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

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

Not: Path, yerleşik bir Node.js modülüdür, bu nedenle bu paketi npm yoluyla yüklemenize gerek yoktur.

Uzun bir cevap listesine ek olarak, bu sorun da başıma geldi çünkü yolun tarayıcı senkronizasyonu açısından yanlış olduğunu fark etmedim.

Bu basit klasör yapısı göz önüne alındığında:

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

hrefnitelik içeride <link>de index.htmlolmak zorunda app/styles/style.cssdeğilstyles/style.css

Google Chrome araçlarını açabilir, ağ sekmesini seçebilir, sayfanızı yeniden yükleyebilir ve CSS'nin dosya isteğini bulabilir ve dosyanın içinde ne olduğunu arayabilirsiniz.

Belki de dosyanızdaki iki kütüphaneyi birleştirdiğinizde, CSS için uygun olmayan bazı karakterler veya başlıklar da dahil olmak üzere yanlış bir şey yaptınız?

Express'i JS kullanmıyorsanız aşağıdakileri deneyin:

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

Örnek olarak, CSS dosyam şurada: public/stylesheets/app.css

Node.js uygulaması için, sunucu dosyanızdaki tüm gerekli modülleri içe aktardıktan sonra bunu kullanın:

app.use(express.static("."));

• Express'teki express.static yerleşik ara katman yazılımı işlevi ve bu .html dosyanızda: <link rel="stylesheet" href="style.css">

Aynı sorunu aldım ve yazdığımı kontrol ettim:

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

Sonra değiştirdim

<base href="/">

Ve sonra iyi çalıştı.

Rel = "stylesheet" i kaldırın ve type = "text / html" ekleyin. Yani şöyle görünecek -

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

Benim durumumda, paketi canlı olarak dağıtırken, genel HTML klasöründen çıkardım. Bir sebepten ötürü.

Ama görünüşe göre sıkı bir MIME tipi kontrol etkinleştirildi ve benim tarafımda mı yoksa birlikte olduğum şirket tarafından mı olduğundan emin değilim.

Ama stil klasörünü index.php dosyasıyla aynı dizine taşıdığımda hatayı almayı bıraktım ve stil mükemmel bir şekilde etkinleştirildi.

Bootstrap stilleri yüklenmiyor # 3411

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

1. Bootstrap s. 3.3.7 yükledim

   npm install bootstrap --save

2. Sonra gerekli script dosyalarını apps[0].scriptsangular-cli.json dosyasına ekledim:

   "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. Sunumu yeniden başlattım

Benim için çalıştı.

tarayıcı ilgili css dosyasını bulamazsa, bu hatayı verebilir.

Açısal uygulama kullanıyorsanız, index.html dosyasına css dosya yolu koymanız gerekmez

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

İlgili css dosya yolunu styles.css dosyasına koyabilirsiniz.

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

Sorunun ana nedenlerinden biri, yüklemeye çalışan CSS dosyasının geçerli bir CSS dosyası olmamasıdır.

Nedenler:

• Geçersiz MIME türü
• Stil sayfasının içinde JavaScript kodu olması - (hatalı Webpack bundler yapılandırması nedeniyle oluşabilir)

Yüklemeye çalıştığınız dosyanın geçerli bir CSS stil sayfası olduğunu kontrol edin (ağ sekmesinden dosyanın sunucu URL'sini alın ve yeni bir sekmeye basın ve doğrulayın).

Gövde etiketinin içinde <link> kullanırken dikkate alınması gereken yararlı bilgiler.

linkGövde içinde bir etiket bulundurmak, etiketi kullanmanın standart yolu değildir. Ancak bunu sayfa optimizasyonu için kullanabiliriz (daha fazla bilgi: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ) / işletme kullanım durumu talep ederse (için yapılandırılan içerik ve sunucunun gövdesine hizmet ettiğinizde) HTML sayfasını sağlanan içerikle oluşturmalıdır).

Gövde etiketinin içinde tutarken itemProperty, linketikete aşağıdaki gibi bir özellik eklemeliyiz:

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

Daha fazla bilgi için üzerinde itemPropertybir göz /webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-document .

tarayıcılar konsoluma> network> style.css ... 'e tıklayıp üzerine tıklayıp "/ get / to / my / CSS" dosyasını gösteremedi, bu bana bağlantımın yanlış olduğunu söyledi. i CSS dosyamın yoluna değiştirdim.

Değişiklikten önceki orijinal yol localhost: 3000 / Örnek / public / style.css, localhost: 3000 / style.css olarak değiştirildi.

dosyayı app.use (express.static (path.join (__ dirname, "public"))); veya app.use (express.static ("public")); sunucunuz tarayıcıya "bu klasörü" geçirir, böylece tarayıcınıza bir "/yourCssName.css" bağlantısı ekleyerek onu çözer

Tarayıcınızın CSS bağlantısına başka yollar ekleyerek, tarayıcıya belirtilen rotada css'yi aramasını söylerdiniz.

özet olarak ... tarayıcınızın CSS bağlantısının nereye işaret ettiğini kontrol edin.

JavaScript'te Stiller'i şu şekilde ayarlıyorsanız:

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

Sonra sadece cssLint.type (yukarıdaki açıklamada okla gösterilir) yerine "MIME" yazın:

   cssLink.type = "MIME";

Hatadan kurtulmanıza yardımcı olacaktır.

Bu sorun, tepki aracı veya açısal için cli aracını kullandığınızda gerçekleşir, bu nedenle anahtar, URL'lerinizi oluşturduğunuz arka uç sunucusuyla karıştıran kendi lite sunucuları olduklarını başlattıklarından, bu son derlemenin tamamını bu araçlardan kopyalamaktır. ... tüm yapı klasörünü alın ve arka uç sunucu projenizin varlık klasörüne dökün ve onları Angular veya Reactjs ile birlikte gelen sunucudan değil, arka uç sunucunuzdan geri gönderin. Aksi takdirde, belirli bir kullanıcı tarafından ön uç olarak kullanırsınız API sunucusu

Azure B2C kullanıcı akışına özel bir görünüm ve his ekleyerek aynı sorunla karşılaştım. Ne buldum html sayfasının atıfta bulunduğu kök benim depolama bob yolu yerine ../oauth/v2 (yani oauth sunucu yolu) oldu.

Sayfaların tam URL'sini koymak sorunu benim için düzeltti.

Bir sıkıştırmanın etkin veya devre dışı olup olmadığını kontrol edin. Kullanırsanız veya etkinleştirilmiş biri kullanırsanız app.use(express.static(xxx))yardımcı olmaz. Sunucunuzun sıkıştırmaya izin verdiğinden emin olun.

Web paketime Brotli ve Sıkıştırma Eklentileri eklediğimde benzer hatayı görmeye başladım. Daha sonra sunucunuzun bu tür içerik sıkıştırmasını da desteklemesi gerekir.

Express kullanıyorsanız, aşağıdakiler yardımcı olacaktır:

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

Modül denir: express-statik-gzip

Ayarlarım:

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