Hoja de estilo no cargada debido al tipo MIME


384

Estoy trabajando en un sitio web que utiliza gulppara compilar y sincronizar el navegador para mantener el navegador sincronizado con mis cambios.

La tarea gulp compila todo correctamente, pero en el sitio web, no puedo ver ningún estilo, y la consola muestra este mensaje de error:

Se negó a aplicar el estilo de ' http: // localhost: 3000 / assets / styles / custom-style.css ' porque su tipo MIME ('text / html') no es un tipo MIME de hoja de estilo compatible, y la verificación MIME estricta está habilitada.

Ahora, realmente no entiendo por qué sucede esto.

El HTML incluye el archivo como este (que estoy bastante seguro de que es correcto):

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

Y la hoja de estilo es una fusión entre Bootstrap y estilos de fuente impresionante por ahora (nada personalizado aún).

La ruta también es correcta, ya que esta es la estructura de la carpeta:

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

Pero sigo recibiendo el error.

¿Qué podría ser? ¿Es esto algo (quizás una configuración?) Para gulp / browsersync quizás?


Obtuve esto cuando mi hoja de estilo vinculada comenzó con una etiqueta html <style ... en lugar de saltar directamente a las reglas de estilo. También obtuve esto al vincular en un archivo html cargado más tarde (AngularJS), así que cambié a cargar dinámicamente en la carga de la página a través de JavaScript y el problema desapareció.
Newclique

82
Ocurre cuando configura una URL incorrecta para el archivo o cuando su servidor no está configurado correctamente. En el resultado, el navegador NO obtiene la hoja de estilo, pero obtiene algo de HTML con estado 404 y con el encabezado "Tipo de contenido". Dado que el navegador obtiene algo del servidor, no le dice que no hay respuesta, pero le dice que el tipo MIME del archivo es incorrecto. La forma más rápida de verificarlo es simplemente intentar abrir el archivo directamente http://localhost:3000/assets/styles/custom-style.cssen una nueva pestaña.
RussCoder

66
Para mí fue el caso que describió RussCoder. La razón detrás de esto fue que usé Angular y olvidé agregar un archivo CSS al paquete de estilos en angular.json. Por lo tanto, se ignoró al compilar la aplicación.
Jana

1
Podría solucionar este problema mediante configuraciones de seguridad de primavera. Estaba bloqueando el acceso a la carpeta de recursos.
sndu

2
Una mala proxy.conf.jsonconfiguración nos ha llevado a este extraño error, ya que el reenvío de solicitudes a la API de fondo no funcionaba correctamente, por lo tanto, la respuesta de error HTML.
ktsangop

Respuestas:


139

Para aplicaciones Node.js, verifique su configuración:

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

Tenga en cuenta que /publicno tiene una barra diagonal al final, por lo que deberá incluirlo en la opción href de su HTML:

href="/css/style.css">

Si incluyó una barra diagonal ( /public/), puede hacerlo href="css/style.css".


href = "/ assets / style.css"> en mi caso resolvió el problema!
Sergio Guerjik

127

El problema, creo, fue con una biblioteca CSS que comienza con comentarios.

Mientras estoy en desarrollo, no minimizo archivos y no elimino comentarios. Esto significó que la hoja de estilo comenzó con algunos comentarios, lo que hizo que se viera como algo diferente de CSS.

Al eliminar la biblioteca y ponerla en un archivo de proveedor (que SIEMPRE se minimiza sin comentarios) se resolvió el problema.

Nuevamente, no estoy 100% seguro de que esto sea una solución, pero sigue siendo una victoria para mí, ya que funciona como se esperaba ahora.


44
Una solución a medias porque si no desea poner todo este CSS en el proveedor, ¿qué debe hacer? ¿Minimiza node_modules cada vez que prueba su aplicación? Doh ... ¿Encontraste algo para compilar un módulo determinado?
SteamFire

1
En mi proceso de compilación, el archivo del proveedor se crea solo en la compilación y luego solo miro los cambios en los archivos en los que estoy trabajando (que generalmente no es nada que entre en el proveedor). Esto significa que la primera compilación es un poco más lenta, pero luego solo compilo mis archivos sin minificación, lo que no me está ralentizando el proceso
Nick

3
Me encontré con este mismo problema y descubrí que estaba tratando de cargar una versión minimizada del archivo que estaba presente en el servidor como un archivo no minimizado. Entonces, estaba tratando de cargar "custom-style.min.css" cuando el archivo en el servidor era "custom-style.css". Una vez que cambié mi enlace para cargar el recurso correcto, todo funcionó bien.
Programador Dan

El problema no se limita a CSS. También obtuve un 404 en un archivo JS que fue causado por un comentario en la primera línea.
Negro

80

Este error también puede aparecer cuando no te refieres a tu archivo CSS correctamente.

Por ejemplo, si su etiqueta de enlace es

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

pero su archivo CSS se llama style.css(sin el segundo s), entonces hay una buena posibilidad de que vea este error.


44
Exactamente lo que me pasó. Intenté cada respuesta aquí (cambiar el tipo mime, eliminar comentarios CSS, cambiar la configuración de node.js ...). Todo lo que tenía que hacer era corregir un error tipográfico en el nombre CSS. Doh!
AJPerez

55
Para agregar a esta respuesta, asegúrese de que gulp realmente encontró el archivo css y lo canalizó a su dist. Cada vez que recibo este error, es porque de alguna manera arruiné mi ruta a los archivos css y simplemente no existe en el directorio de compilación.
LAdams87

55
Sí, lo mismo para mí, un error tipográfico simple y estúpido. Creo que lo que hace es que el servidor envíe una página de respuesta 404, por lo que su navegador obtiene esa página 404 y le dice que no es el CSS correcto ... lo cual es cierto.
tanou

62

En la mayoría de los casos, esto podría ser simplemente que la ruta del archivo CSS es incorrecta . Entonces el servidor web regresa status: 404con una Not Foundcarga útil de contenido dehtml tipo.

El navegador sigue esta ruta (incorrecta) desde la <link rel="stylesheet" ...>etiqueta con la intención de aplicar estilos CSS. Pero el tipo de contenido devuelto contradice, por lo que registra un error.

Enter image description here


Mi problema fue que la ruta no era válida. Pero, este mal camino fue causado por la base href establecida para mi proyecto angular que es incorrecta. Si alguien más comenzó a ver este error después de actualizar su base href, puede ser la causa.
Krejko

1
Gracias por tomarse la molestia de documentar completa y claramente cómo un error 404 en el archivo CSS puede producir este mensaje de error (inicialmente) desconcertante
Velojet

1
otra forma de solucionar problemas, pegue la URL en la que está recibiendo este error en otra pestaña, si no ve CSS, este es probablemente el problema
BlackICE

Gracias por tu pista
Jason Zhou

52

Haga una carpeta justo debajo / encima del archivo style.css según la estructura angular y proporcione un enlace como <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.

Ingrese la descripción de la imagen aquí


23
¿Por qué funciona esto? El error indica que "text / html" no es un tipo MIME compatible.
James Bateson

66
En mi caso, el error desapareció, sin embargo, los estilos CSS no se aplican.: /
Andru

2
Pasé más tiempo leyendo sobre este problema y cambiando el tipo de un archivo css ibto, algo más puede causar problemas graves, como css que el servidor lee como html
Nick

En AngularDart, la raíz de index.html es la carpeta 'web', no la carpeta principal del proyecto. Por lo tanto, todos los archivos CSS deben estar dentro de la carpeta web. Al igual que este "[carpeta de proyectos] \ web [sus archivos aquí]". Entonces, si intenta importar un archivo CSS ubicado fuera de la carpeta web, no se encontrará.
Wael

40

Tuve este error para una plantilla Bootstrap.

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

Luego eliminé el rel="stylesheet"del enlace, es decir:

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

Y todo funciona bien. Pruebe esto si está utilizando plantillas Bootstrap.


3
Buena atrapada. El error se ha ido ahora.
Rico

1
Según el estándar de vida (4.2.4) , "Un elemento de enlace debe tener un atributo rel o un atributo itemprop, pero no ambos". Entonces, eliminar el relatributo solo elimina la funcionalidad de incluir una hoja de estilo.
Artjom B.

esto curiosamente funcionó para mí.

35

He cambiado mi 'href' -> 'src'. Entonces de esto:

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

a esto:

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

Funcionó. No sé por qué, pero hizo el trabajo.


1
Aunque también funcionó para mí, ¿es un atributo válido?
sr9yar

1
@ sr9yar Tienes razón en que, de acuerdo con validator.w3.org, no es válido tener src en el enlace, por lo que es bueno como una revisión rápida, pero tan pronto como tenga un poco más de tiempo, sugeriría encontrar otro más solución válida
Sebastian Voráč el

20

Los comentarios en su archivo dispararán esto. Algunos minificadores no eliminarán comentarios.

ADEMÁS

Si usa Node.js y configura sus archivos estáticos usando express:

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

Necesita direccionar adecuadamente los archivos.

En mi caso, ambos eran el problema, así que prefije mis enlaces CSS con "/css/styles.css".

Ejemplo:

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

Esta solución es perfecta ya que la ruta es el problema principal para que CSS no obtenga renderizado


18

Simplemente hice referencia al archivo CSS (un tema angular en mi caso) en la sección de estilos de mi configuración de compilación Angular 6 en angular.json:

Ingrese la descripción de la imagen aquí

Esto no responde la pregunta, pero podría ser una solución adecuada, como lo fue para mí.


3
Esa es la respuesta correcta para proyectos de Angular-CLI 6
Torsten Barthel

14

Como se mencionó en esta publicación, algunas de las soluciones funcionaron para mí, pero CSS no se aplica en la página.

Simplemente, acabo de mover el directorio "css" al directorio "Assest /" y todo funciona bien.

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

Impresionante (Y) solucionó mi problema
Chakri

12

También para otras personas que usan Angular-CLI y publican en una subcarpeta en el servidor web, verifique esta respuesta:

Cuando realice la implementación en una ruta no raíz dentro de un dominio, deberá actualizar manualmente <base href="https://stackoverflow.com/"> etiqueta en sudist/index.html.

En este caso, deberá actualizar a <base href="https://stackoverflow.com/sub-folder/">

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


10

Mi problema es que estaba usando webpack y en mi enlace HTML CSS tenía una ruta relativa, y cada vez que navegaba a una página anidada, eso se resolvería en la ruta incorrecta:

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

así que la solución simple era eliminar el .dado que el mío es una aplicación de una sola página .

Me gusta esto:

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

así que siempre resuelve /index.css


Sí, en mi caso, olvidé eliminar estas rutas relativas de mi archivo index.html y estaba ejecutando webpack en el modo de producción. Estas rutas no son necesarias ya que webpack vincula los archivos css dinámicamente a través de webpack.prod.js.
Kewal Shah

10

Tuve este problema con un sitio que sabía que funcionaba en línea cuando lo mudé a localhost y PhpStorm.

Esto funcionó bien en línea:

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

Pero para localhost necesitaba deshacerme de la barra:

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

Por lo tanto, estoy reforzando algunas respuestas proporcionadas aquí: es probable que sea un error de ruta o de ortografía en lugar de un problema complicado de configuración del servidor. El error en la consola es un arenque rojo; primero se debe verificar la pestaña de red para el 404.

Entre las respuestas proporcionadas aquí hay algunas soluciones que no son correctas. La adición type="text/html"o cambio hrefasrc no es la respuesta.

Si desea tener todos los atributos para que se valide en los validadores más exigentes y su IDE, se debe proporcionar el valor de los medios y , por ejemplo, reldebe ser stylesheet:

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

10

Sé que puede estar fuera de contexto, pero vincular un archivo no existente puede causar este problema como me sucedió antes.

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

Si este archivo no existe, enfrentará ese problema.


8

He tenido el mismo problema.

Si la estructura de su proyecto es como el siguiente árbol:

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

Recomiendo agregar el siguiente código en server.js:

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

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

Nota: Path es un módulo Node.js incorporado, por lo que no necesita instalar este paquete a través de npm.


7

Además de una larga lista de respuestas, este problema también me ocurrió porque no me di cuenta de que la ruta era incorrecta desde el punto de vista de la sincronización del navegador.

Dada esta simple estructura de carpetas:

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

el hrefatributo dentro <link>de index.htmltiene que ser app/styles/style.cssy nostyles/style.css


De hecho, solo un error tipográfico en el camino me dio el mismo error.
Julesezaar

wow esto funcionó para mí, muchas gracias. Estaba literalmente a punto de rendirme
Vash

7

Puede abrir las herramientas de Google Chrome, seleccionar la pestaña de red, volver a cargar su página y buscar la solicitud de archivo del CSS y buscar lo que tiene dentro del archivo.

¿Quizás hizo algo mal cuando fusionó las dos bibliotecas en su archivo, incluidos algunos caracteres o encabezados que no son los adecuados para CSS?


1
desafortunadamente lo intenté pero realmente no está ayudando, la solicitud falla instantáneamente y solo tiene la URL de solicitud (que es correcta)
Nick

6

En caso de que use Express sin JS intente con:

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

Como ejemplo, mi archivo CSS está en public/stylesheets/app.css


5

Para una aplicación Node.js, solo use esto después de importar todos los módulos requeridos en su archivo de servidor:

app.use(express.static("."));
  • función de middleware incorporado express.static en Express y esto en su archivo .html: <link rel="stylesheet" href="style.css">

3
Realmente no quieres servir tu código de servidor al público, ¿verdad?
Ki Jéy

5

Tuve el mismo problema y luego verifiqué que escribí:

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

Entonces cambié a

<base href="/">

Y luego funcionó bien.


4

Elimine rel = "stylesheet" y agregue type = "text / html". Entonces se verá así:

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

Finalmente una respuesta que funcionó para mí. ¡Gracias!
Richard Witherspoon

4

En mi caso, cuando estaba implementando el paquete en vivo, lo tenía fuera de la carpeta HTML pública. Fue por una razón.

Pero aparentemente se ha activado una estricta verificación de tipo MIME, y no estoy muy seguro de si está de mi parte o de la compañía con la que estoy alojando.

Pero tan pronto como moví la carpeta de estilo en el mismo directorio que el archivo index.php, dejé de recibir el error y el estilo se activó perfectamente.


4

Los estilos de Bootstrap no se cargan # 3411

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

  1. Instalé Bootstrap v. 3.3.7

    npm install bootstrap --save
  2. Luego agregué los archivos de script necesarios apps[0].scriptsen el archivo 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. Reinicié ng servir

Funcionó para mi.


4

si el navegador no puede encontrar el archivo css relacionado, podría dar este error.

Si usa la aplicación Angular, no tiene que poner la ruta del archivo css en index.html

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

Puede poner la ruta del archivo css relacionada en el archivo styles.css.

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

Esta fue la solución para mí, elimine el enlace href de index.html y utilicé el método de importación en styles.scss.
IronWorkshop el

3

Una de las principales razones del problema es que el archivo CSS que está intentando cargar no es un archivo CSS válido.

Causas:

  • Tipo MIME no válido
  • Tener código JavaScript dentro de la hoja de estilo (puede ocurrir debido a una configuración incorrecta del paquete Webpack)

Compruebe que el archivo que está intentando cargar es una hoja de estilo CSS válida (obtenga la URL del servidor del archivo desde la pestaña de red y presione en una pestaña nueva y verifique).

Información útil para tener en cuenta al usar <link> dentro de la etiqueta del cuerpo.

Aunque tener una linketiqueta dentro del cuerpo no es la forma estándar de usar la etiqueta. Pero podemos usarlo para la optimización de la página (más información: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ) / si el caso de uso comercial lo exige (cuando sirve el cuerpo del contenido y el servidor configurado para tiene que renderizar la página HTML con el contenido proporcionado).

Mientras nos mantenemos dentro de la etiqueta del cuerpo, debemos agregar el atributo itemPropertyen la linketiqueta como

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

Para obtener más información sobre itemPropertyeche un vistazo en /webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-document .


3

yendo a la consola de mi navegador> red> style.css ... hice clic en él y mostró "no se puede obtener / ruta / a / mi / CSS", esto me dijo que mi enlace estaba mal. Cambié eso a la ruta de mi archivo CSS.

La ruta original antes del cambio era localhost: 3000 / Example / public / style.css cambiándolo a localhost: 3000 / style.css lo resolvió.

si está sirviendo el archivo desde app.use (express.static (path.join (__ dirname, "public"))); o app.use (express.static ("public")); su servidor pasaría "esa carpeta" al navegador, por lo que agregar un enlace "/yourCssName.css" en su navegador lo resuelve

Al agregar otras rutas en el enlace CSS de su navegador, le indicaría al navegador que busque el CSS en la ruta especificada.

en resumen ... verifique a dónde apunta el enlace CSS de su navegador.


2

Si está configurando Estilos en JavaScript como:

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

Luego simplemente cambie cssLint.type (indicado por la flecha en la descripción anterior) a "MIME":

   cssLink.type = "MIME";

Le ayudará a deshacerse del error.


2

Este problema ocurre cuando usa la herramienta cli para reactjs o angular, por lo que la clave es copiar la compilación final completa de esas herramientas, ya que inicializan sus propios servidores lite, lo que confunde sus URL con el servidor back-end que ha creado. ... tome esa carpeta de compilación completa y vuélvala a la carpeta de activos de su proyecto de servidor back-end y refiérala desde su servidor back-end y no desde el servidor que se envía con Angular o Reactjs. De lo contrario, lo está utilizando como front-end de un determinado Servidor API


2

Encontré este problema con el mismo problema al agregar una apariencia personalizada a un flujo de usuarios de Azure B2C. Lo que encontré fue que la raíz a la que se refería la página html era ../oauth/v2 (es decir, la ruta del servidor oauth) en lugar de la ruta a mi bob de almacenamiento.

Poner en la url completa de las páginas me solucionó el problema.


2

Compruebe si tiene una compresión habilitada o deshabilitada. Si lo usa o alguien lo habilitó, entoncesapp.use(express.static(xxx)) no ayudará. Asegúrese de que su servidor permita la compresión.

Comencé a ver un error similar cuando agregué Brotli y Compression Plugins a mi Webpack. Entonces su servidor también debe soportar este tipo de compresión de contenido.

Si está utilizando Express, lo siguiente debería ayudar:

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

El módulo se llama: express-static-gzip

Mi configuración es:

const gzipOptions = {
  enableBrotli: true,
  customCompressions: [{
  encodingName: 'deflate',
  fileExtension: 'zz'
 }],
 orderPreference: ['br']
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.