Foglio di stile non caricato a causa del tipo MIME

Sto lavorando su un sito Web che utilizza gulpper compilare e sincronizzare il browser per mantenere il browser sincronizzato con le mie modifiche.

L'attività gulp compila tutto correttamente, ma sul sito Web non riesco a vedere alcuno stile e la console mostra questo messaggio di errore:

Si è rifiutato di applicare lo stile da " http: // localhost: 3000 / assets / styles / custom-style.css " perché il suo tipo MIME ("text / html") non è un tipo MIME di fogli di stile supportato e il controllo MIME rigoroso è abilitato.

Ora, non capisco davvero perché questo accada.

L'HTML include il file in questo modo (che sono quasi sicuro sia corretto):

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

E il foglio di stile è un'unione tra Bootstrap e stili fantastici di font per ora (niente di ancora personalizzato).

Anche il percorso è corretto, poiché questa è la struttura delle cartelle:

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

Ma continuo a ricevere l'errore.

Cosa potrebbe essere? È forse qualcosa (forse un'impostazione?) Per gulp / browsersync?

Per le applicazioni Node.js, controlla la tua configurazione:

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

Nota che /publicalla fine non è presente una barra, quindi dovrai includerla nell'opzione href del tuo HTML:

href="/css/style.css">

Se hai incluso una barra ( /public/), puoi semplicemente farlo href="css/style.css".

Il problema, penso, era con una libreria CSS che inizia con i commenti.

Durante lo sviluppo, non minimizzo i file e non rimuovo i commenti. Ciò significa che il foglio di stile è iniziato con alcuni commenti, facendolo apparire come qualcosa di diverso dal CSS.

La rimozione della libreria e l'inserimento in un file del fornitore (che è SEMPRE minimizzato senza commenti) ha risolto il problema.

Ancora una volta, non sono sicuro al 100% che questa sia una soluzione, ma è comunque una vittoria per me poiché funziona come previsto ora.

Questo errore può verificarsi anche quando non ti riferisci correttamente al tuo file CSS.

Ad esempio, se il tag del link è

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

ma il tuo file CSS è chiamato style.css(senza i secondi), allora c'è una buona probabilità che vedrai questo errore.

Nella maggior parte dei casi, potrebbe trattarsi semplicemente del percorso del file CSS errato . Quindi il web server ritorna status: 404con un certo Not Foundpayload di contenuto di htmltipo.

Il browser segue questo percorso (sbagliato) dal <link rel="stylesheet" ...>tag con l'intenzione di applicare gli stili CSS. Ma il tipo di contenuto restituito è in contraddizione in modo da registrare un errore.

Crea una cartella appena sotto / sopra il file style.css secondo la struttura angolare e fornisci un link simile <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.

Ho avuto questo errore per un modello Bootstrap.

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

Quindi ho rimosso il rel="stylesheet"dal link, ovvero:

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

E tutto funziona bene. Prova questo se stai utilizzando i modelli Bootstrap.

Ho cambiato il mio 'href' -> 'src'. Quindi da questo:

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

a questo:

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

Ha funzionato. Non so perché, ma ha fatto il lavoro.

I commenti nel tuo file faranno scattare questo. Alcuni minimizzatori non rimuoveranno i commenti.

ANCHE

Se usi Node.js e imposti i tuoi file statici usando expresscome:

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

Devi indirizzare correttamente i file.

Nel mio caso entrambi erano il problema, quindi ho anteposto i miei collegamenti CSS a "/css/styles.css".

Esempio:

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

Questa soluzione è perfetta in quanto il percorso è il problema principale per i CSS che non ottengono il rendering

Ho semplicemente fatto riferimento al file CSS (un tema angolare nel mio caso) nella sezione stili della mia configurazione di build Angular 6 in angular.json:

Questo non risponde alla domanda, ma potrebbe essere una soluzione adeguata, come è stato per me.

Come menzionato le soluzioni in questo post, alcune delle soluzioni hanno funzionato per me, ma CSS non si applica alla pagina.

Semplicemente, ho appena spostato la directory "css" nella directory "Assest /" e tutto funziona bene.

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

Anche per gli altri che usano Angular-CLI e pubblicano in una sottocartella sul server web, controlla questa risposta:

Quando esegui la distribuzione in un percorso non root all'interno di un dominio, dovrai aggiornare manualmente il <base href="https://stackoverflow.com/">tag nel tuodist/index.html.

In questo caso, dovrai aggiornare a <base href="https://stackoverflow.com/sub-folder/">

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

Il mio problema è che stavo usando il webpack e nel mio collegamento CSS HTML avevo un percorso relativo, e ogni volta che avrei navigato verso una pagina nidificata, che si sarebbe risolto nel percorso sbagliato:

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

quindi la soluzione semplice era quella di rimuovere .poiché la mia è un'applicazione a pagina singola .

Come questo:

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

quindi si risolve sempre /index.css

Ho avuto questo problema con un sito che sapevo funzionare online quando l'ho spostato su localhost e PhpStorm.

Questo ha funzionato benissimo online:

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

Ma per localhost dovevo liberarmi della barra:

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

Quindi sto rafforzando alcune risposte già fornite qui: è probabile che si tratti di un errore di percorso o di ortografia piuttosto che di un complicato problema di configurazione del server. L'errore nella console è un'aringa rossa; la scheda di rete deve prima essere controllata per il 404.

Tra le risposte fornite qui ci sono alcune soluzioni che non sono corrette. L'aggiunta type="text/html"o la modifica hrefdisrc non è la risposta.

Se si desidera avere tutti gli attributi in modo da convalidare il più esigente dei validatori e il proprio IDE, è necessario fornire il valore del supporto e reldovrebbe essere stylesheet, ad esempio:

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

So che potrebbe essere fuori contesto, ma il collegamento di un file inesistente potrebbe causare questo problema come è successo a me prima.

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

Se questo file non esiste, dovrai affrontare questo problema.

Ho avuto lo stesso problema.

Se la struttura del tuo progetto è come il seguente albero:

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

Consiglio di aggiungere il seguente codice in server.js:

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

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

Nota: Path è un modulo Node.js integrato, quindi non è necessario installare questo pacchetto tramite npm.

Aggiungendo a un lungo elenco di risposte, questo problema mi è successo anche perché non mi rendevo conto che il percorso era sbagliato dal punto di vista della sincronizzazione del browser.

Data questa semplice struttura di cartelle:

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

l' hrefattributo dentro <link>in index.htmldeve essere app/styles/style.csse nonstyles/style.css

Puoi aprire gli strumenti di Google Chrome, selezionare la scheda di rete, ricaricare la tua pagina e trovare la richiesta di file del CSS e cercare ciò che ha all'interno del file.

Forse hai fatto qualcosa di sbagliato quando hai unito le due librerie nel tuo file, inclusi alcuni caratteri o intestazioni non correttamente per i CSS?

Nel caso in cui si utilizzi Express senza JS, provare con:

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

Ad esempio, il mio file CSS è a public/stylesheets/app.css

Per un'applicazione Node.js, basta usare questo dopo aver importato tutti i moduli richiesti nel file del server:

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

• funzione middleware integrata express.static in Express e questo nel tuo file .html: <link rel="stylesheet" href="style.css">

Ho avuto lo stesso problema e poi ho verificato di aver scritto:

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

Poi sono passato a

<base href="/">

E poi ha funzionato bene.

Rimuovi rel = "foglio di stile" e aggiungi type = "text / html". Quindi sembrerà così -

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

Nel mio caso, quando stavo distribuendo il pacchetto live, lo avevo estratto dalla cartella HTML pubblica. È stato per un motivo.

Ma a quanto pare è stato attivato un rigoroso controllo del tipo MIME, e non sono troppo sicuro che sia dalla mia parte o dalla società con cui sto ospitando.

Ma non appena ho spostato la cartella dello stile nella stessa directory del file index.php ho smesso di ottenere l'errore e lo stile è stato attivato perfettamente.

Stili Bootstrap che non caricano # 3411

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

1. Ho installato Bootstrap v. 3.3.7

   npm install bootstrap --save

2. Quindi ho aggiunto i file di script necessari apps[0].scriptsnel 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. Ho riavviato il servizio

Ha funzionato per me.

se il browser non riesce a trovare il file CSS correlato, potrebbe dare questo errore.

Se si utilizza l'applicazione angolare non è necessario inserire il percorso del file CSS su index.html

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

È possibile inserire il percorso del file CSS correlato nel file styles.css.

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

Uno dei motivi principali del problema è che il file CSS che sta tentando di caricare non è un file CSS valido.

cause:

• Tipo MIME non valido
• Avere codice JavaScript all'interno del foglio di stile - (potrebbe verificarsi a causa di una configurazione errata del bundler Webpack)

Controlla che il file che stai tentando di caricare sia un foglio di stile CSS valido (ottieni l'URL del server del file dalla scheda di rete e premi in una nuova scheda e verifica).

Informazioni utili da considerare quando si utilizza <link> all'interno del tag body.

Anche se avere un linktag all'interno del corpo non è il modo standard di usare il tag. Ma possiamo usarlo per l'ottimizzazione della pagina (maggiori informazioni: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ) / se il caso d'uso aziendale richiede (quando si serve il corpo del contenuto e del server configurato per eseguire il rendering della pagina HTML con il contenuto fornito).

Mantenendo all'interno del tag body dobbiamo aggiungere l'attributo itemPropertynel linktag like

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

Per maggiori informazioni su dai itemPropertyun'occhiata a /webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-document .

andando nella console del mio browser> network> style.css ... facendo clic su di esso e ha mostrato "impossibile ottenere / path / to / my / CSS", questo mi ha detto che il mio link era sbagliato. l'ho cambiato nel percorso del mio file CSS.

Il percorso originale prima della modifica era localhost: 3000 / Esempio / public / style.css cambiandolo in localhost: 3000 / style.css risolto.

se stai offrendo il file da app.use (express.static (path.join (__ dirname, "public"))); o app.use (express.static ("public")); il tuo server passerebbe "quella cartella" al browser, quindi l'aggiunta di un link "/yourCssName.css" nel tuo browser lo risolve

Aggiungendo altri percorsi nel collegamento CSS del browser, si direbbe al browser di cercare i CSS nel percorso specificato.

in sintesi ... controlla dove punta il link CSS del tuo browser.

Se stai impostando gli stili in JavaScript come:

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

Quindi basta cambiare cssLint.type (indicato dalla freccia nella descrizione sopra) in "MIME":

   cssLink.type = "MIME";

Ti aiuterà a sbarazzarti dell'errore.

Questo problema si verifica quando si utilizza lo strumento cli per reazioni o angolari, quindi la chiave è copiare l'intero build finale da quegli strumenti poiché inizializzano i propri server Lite che confondono i tuoi URL con il server back-end che hai creato ... prendi l'intera cartella di build e scaricala sulla cartella delle risorse del tuo progetto del server back-end e ref loro dal tuo server back-end e non dal server fornito con Angular o Reactjs Altrimenti lo stai usando come front-end da un certo Server API

Mi sono imbattuto in questo problema avendo lo stesso problema aggiungendo un aspetto personalizzato a un flusso di utenti B2C di Azure. Quello che ho scoperto è che la radice a cui faceva riferimento la pagina html era ../oauth/v2 (ovvero il percorso del server oauth) piuttosto che il percorso del mio bob di archiviazione.

Inserendo l'URL completo delle pagine ho risolto il problema per me.

Controlla se hai una compressione abilitata o disabilitata. Se lo usi o qualcuno lo ha abilitato, alloraapp.use(express.static(xxx)) ti sarà d'aiuto. Assicurati che il tuo server consenta la compressione.

Ho iniziato a vedere l'errore simile quando ho aggiunto i plugin Brotli e Compression al mio Webpack. Quindi il tuo server deve supportare anche questo tipo di compressione del contenuto.

Se si utilizza Express, dovrebbero essere di aiuto:

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

Il modulo si chiama: express-static-gzip

Le mie impostazioni sono:

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