La hoja de estilo no se cargó debido al tipo MIME

585

Estoy trabajando en un sitio web que se 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:

Refused to apply style from 'http://localhost:3000/assets/styles/custom-style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

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 fuentes increíbles por ahora (nada personalizado todavía).

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?) ¿Quizás para gulp / browsersync?

9
  • Estaba recibiendo esto cuando mi hoja de estilo vinculada comenzó con una etiqueta html <style ... en lugar de simplemente saltar directamente a las reglas de estilo. También obtuve esto al vincular un archivo html cargado más tarde (AngularJS), así que cambié a cargar dinámicamente al cargar la página a través de JavaScript y el problema desapareció. Newclique 23 de mayo de 2018 a las 1:01
  • 182
    Ocurre cuando establece 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 "Content-Type". 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 comprobarlo es simplemente intentar abrir el archivo directamente http://localhost:3000/assets/styles/custom-style.cssen una nueva pestaña. RussCoder 12 sep 2018 a las 7:08
  • 7
    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 empaquetado de estilos en angular.json. Por lo que se ignoró al crear la aplicación. Jana 25 de enero de 2019 a las 12:08
  • 2
    Podría solucionar este problema mediante configuraciones de seguridad de primavera. Bloqueaba el acceso a la carpeta de recursos. sndu 30/01/19 a las 14:57
  • 2
    Una mala proxy.conf.jsonconfiguración nos ha llevado a este extraño error, ya que la solicitud que se reenvía a la API de backend no funcionaba correctamente, por lo que la respuesta de error HTML. ktsangop 10/07/19 a las 7:29
224

Para las aplicaciones de 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á incluirla en la opción href de su HTML:

href="/css/style.css">

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

1
  • 1
    href = "/ assets / style.css"> ¡en mi caso resolvió el problema! Sergio Guerjik 1 mar.20 a las 13:51
163

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

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

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

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

4
  • 4
    Una solución a medias porque si no desea poner todo este CSS en el proveedor, ¿qué debe hacer? ¿Minimizar node_modules cada vez que prueba su aplicación? Doh ... ¿Encontraste algo para compilar un determinado módulo? SteamFire 23/03/18 a las 14:01
  • 1
    En mi proceso de compilación, el archivo del proveedor se crea solo en la compilación y luego solo observo los cambios en los archivos en los que estoy trabajando (que por lo general no entra en el proveedor). Esto significa que la primera compilación es un poco más lenta, pero luego simplemente compilo mis archivos sin minificación, lo que no ralentiza el proceso para míNick 24/03/18 a las 9:50
  • 3
    Me encontré con este mismo problema y descubrí que estaba intentando cargar una versión minimizada del archivo que estaba presente en el servidor como un archivo no minificado. Entonces, estaba intentando 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. Programmer Dan 8 de mayo de 2018 a las 15:35
  • 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. Black 28 feb.20 a las 10:00
115

Este error también puede aparecer cuando no se está refiriendo correctamente a su archivo CSS.

Por ejemplo, si su etiqueta de enlace es

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

pero su archivo CSS tiene un nombre style.css(sin los segundos), entonces es muy probable que vea este error.

5
  • 9
    Exactamente lo que me pasó. Probé todas las respuestas aquí (cambiar el tipo MIME, eliminar los 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 de CSS. Doh! AJPerez 23 de mayo de 2018 a las 10:54
  • 6
    Para agregar a esta respuesta, asegúrese de que gulp realmente encontró el archivo css y lo envió a su dist. Siempre que obtengo este error, es porque arruiné mi ruta a los archivos css de alguna manera y simplemente no existe en el directorio de compilación. user9844377 25 de junio de 2018 a las 19:37
  • 6
    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 un CSS adecuado ... lo cual es cierto. tanou 17/10/18 a las 6:53
  • FWIW, me sucedió el mismo problema cuando los permisos de Sharepoint estaban causando un acceso denegado. Tuve que agregar usuarios autenticados al sitio de SP. Como siempre, GRACIAS a la comunidad de Stack Overflow por señalarme en la dirección correcta. ¡Salud! 🍺Joe Zamora 26 de febrero a las 0:55
  • En mi caso, no subí el style.css al servidor. Duh ..RCW 18 abr a las 10:01
108

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

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 se contradice, por lo que registra un error.

Ingrese la descripción de la imagen aquí

4
  • Mi problema fue que la ruta no era válida. Pero, este mal camino fue causado por el href base establecido para mi proyecto angular que es incorrecto. Si alguien más comenzó a ver este error después de actualizar su href base, puede ser la causa. Krejko 14/12/18 a las 18:34
  • 5
    Gracias por tomarse la molestia de documentar completa y claramente cómo un error 404 en el archivo CSS puede producir este (inicialmente) desconcertante mensaje de errorVelojet 15 de enero de 2019 a las 1:11
  • 8
    Otra forma de solucionar problemas, pegue la URL en la que está recibiendo este error en otra pestaña, si no ve CSS, es probable que este sea el problemaBlackICE 11/12/19 a las 16:20
  • 2
    Que por su sugerenciaJason Zhou 14 mar.20 a las 7:10
61

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 de Bootstrap.

2
  • 3
    Buena atrapada. El error se ha ido ahora. Rich 29 de julio de 2018 a las 4:22
  • 8
    Según Living Standard (4.2.4) , "Un elemento de enlace debe tener un atributo rel o un atributo itemprop, pero no ambos". Por lo tanto, eliminar el relatributo simplemente elimina la funcionalidad de incluir una hoja de estilo. Artjom B. 17 oct 2018 a las 20:32
53

Cree 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í

4
  • 25
    ¿Por qué funciona esto? El error indica que "text / html" no es un tipo MIME admitido. James Bateson 27/03/18 a las 11:15
  • 8
    En mi caso, el error desapareció, los estilos CSS, sin embargo, no se aplican ..: /Andru 19/04/18 a las 14:35
  • 3
    Pasé un poco más de tiempo leyendo sobre este problema y cambiando el tipo de un archivo css a otra cosa que puede causar problemas graves, como css que el servidor lee como htmlNick 20 de abril de 2018 a las 4:42
  • En AngularDart, la raíz de index.html es la carpeta 'web', no la carpeta principal del proyecto. Entonces, todos los archivos css deben estar dentro de la carpeta web. Como este "[carpeta del proyecto] \ web [yourcssfileshere]". Entonces, si intenta importar un archivo css ubicado fuera de la carpeta web, no se encontrará. Wael 2 de septiembre de 2019 a las 12:17
53

He cambiado mi hrefa 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 funcionó.

2
  • 1
    Aunque también funcionó para mí, ¿es este un atributo válido? sr9yar 31 oct 2018 a las 13:42
  • 4
    @ 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 un hotfix rápido, pero tan pronto como tengas un poco más de tiempo te sugiero que busques otro más solución alternativa válida. Sebastian Voráč 13/11/18 a las 18:59
26

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

ADEMÁS

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

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

Necesita abordar correctamente los archivos.

En mi caso, ambos fueron el problema, así que prefijé 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 principal problema para que CSS no obtenga renderizado.

0
20

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 a la pregunta, pero podría ser una solución alternativa adecuada, como lo fue para mí.

1
  • 4
    Esa es la respuesta correcta para proyectos de Angular-CLI 6Torsten Barthel 7 de agosto de 2018 a las 13:30
20

Además de usar:

<base href="/">

Elimine la rel="stylesheet"parte de sus enlaces css:

<link type="text/css" href="assets/styles/custom-style.css"/>
1
  • Quitarlo lo relsolucionó, pero la pregunta es ¿por qué? Solly 19 de agosto a las 15:26
19

Sé que podría estar fuera de contexto, pero vincular un archivo que no existe podría 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.

1
  • Claro, si el archivo no está en el directorio requerido o tiene un nombre diferente, entonces usted causa este problemandoty 6 de junio a las 13:07
17

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

Simplemente, moví 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" >
1
  • Awesome (Y) solucionó mi problemaChakri 16/11/18 a las 8:28
13

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

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

así que la solución simple fue eliminar el .ya que la mía es una aplicación de una sola página .

Como esto:

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

por lo que siempre se resuelve /index.css

1
  • Sí, en mi caso, olvidé eliminar estas rutas relativas de mi archivo index.html y estaba ejecutando el paquete web en el modo de producción. Estas rutas no son necesarias ya que el paquete web vincula los archivos css de forma dinámica a través de webpack.prod.js. Kewal Shah 4 de mayo de 2020 a las 12:50
13

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

Cuando está implementando en una ruta no raíz dentro de un dominio, deberá actualizar manualmente la <base href="/">etiqueta en sudist/index.html.

En este caso, deberá actualizar a <base href="/sub-folder/">

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

13

Tuve este problema con un sitio que sabía que funcionaba en línea cuando lo moví 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">

Así que ya 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 una pista falsa; la pestaña de red debe revisarse para el 404 primero.

Entre las respuestas proporcionadas aquí hay algunas soluciones que no son correctas. Agregar type="text/html"o cambiar hrefa srcno es la respuesta.

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

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

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

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

Entonces me cambié a

<base href="/">

Y luego funcionó bien.

0
10

Yo 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 integrado de Node.js, por lo que no es necesario instalar este paquete a través de npm.

9

Puede abrir las herramientas de Google Chrome, seleccionar la pestaña de red, volver a cargar su página y encontrar 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 adecuados para CSS?

1
  • 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 14 de enero de 2018 a las 11:02
8

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

Dada esta estructura de carpetas simple:

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

el hrefinterior de atributo <link>en index.htmltiene que ser app/styles/style.cssy nostyles/style.css

2
  • De hecho, solo un error tipográfico en la ruta me dio este mismo error. Julesezaar 23 de abril de 2019 a las 8:42
  • wow esto funcionó para mí, muchas gracias. Estaba literalmente a punto de rendirmeVash 26 oct 2019 a las 4:23
8

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

6

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("."));
  • express.static función de middleware incorporada en Express y esto en su archivo .html: <link rel="stylesheet" href="style.css">
1
  • 4
    Realmente no desea entregar el código de su servidor al público, ¿verdad? Ki Jéy 10/08/18 a las 12:16
6

al ir 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 equivocado. Cambié eso a la ruta de mi archivo CSS.

La ruta original antes del cambio era localhost: 3000 / Example / public / style.css cambiándola a localhost: 3000 / style.css resuelto.

si está sirviendo el archivo desde app.use (express.static (path.join (__ dirname, "public"))); o app.use (express.static ("público")); 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 estaría diciendo al navegador que busque el CSS en la ruta especificada.

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

5

Cómo resolví esto. Para las aplicaciones Node.js, debe establecer la configuración de su **public**carpeta.

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

De lo contrario, debes hacer como href="public/css/style.css".

<link href="public/assets/css/custom.css">
<script src="public/assets/js/scripts.js"></script>

Note: It will work for http://localhost:3000/public/assets/css/custom.css. But couldn't work after build. You need to set app.use(express.static(__dirname + '/public')); for Express

4

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

<link  href="styles.css" type="text/html" />
0
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 lado o de la empresa 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é el servicio

Funcionó para mí.

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 relacionado en el archivo styles.css.

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";
1
  • Esta fue la solución para mí, eliminé el enlace href de index.html y usé el método de importación en styles.scss. IronWorkshop 15 nov 2019 a las 3:49
4

Estaba trabajando con la React.jsaplicación y también tuve este error que me llevó aquí. Eso es lo que me ayudó. En lugar de agregar <link>al index.html, agregué un importal componente donde necesito usar esta hoja de estilo:

import 'path/to/stylesheet.css';
4

Esto es específico de Typescript + Express

Ctrl + f'd "Typecript" y ".ts" y no encontré nada en estas respuestas, así que agregaré mi solución aquí, ya que fue causada por (mi inexperiencia con) mecanografiado, y las soluciones que he leído don No resuelvo explícitamente este problema en particular.

El problema era que Typescript estaba compilando mi app.tsarchivo en un archivo javascript en el distdirectorio de mi proyecto ,dist/app.js

Aquí está mi estructura de directorio, vea si puede detectar el problema:

├── app.ts
├── dist
│   ├── app.js
│   ├── app.js.map
│   └── js
│       ├── dbclient.js
│       ├── dbclient.js.map
│       ├── mutators.js
│       └── mutators.js.map
├── public
│   ├── css
│   │   └── styles.css
├── tsconfig.json
├── tslint.json
└── views
    ├── index.hbs
    └── results.hbs

Mi problema es que en app.ts, le estaba diciendo a express que estableciera mi directorio público como /public, que sería una ruta válida si Node realmente estuviera ejecutando Typecript. Pero Node está ejecutando el javascript compilado app.js, que está en el distdirectorio.

Entonces, después de app.ts fingir que ha dist/app.jsresuelto mi problema. Por lo tanto, solucioné el problema app.tscambiando

app.use(e.static(path.join(__dirname, "/public")));

para

app.use(e.static(path.join(__dirname, "../public")));
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 de MIME no válido
  • Tener código JavaScript dentro de la hoja de estilo (puede ocurrir debido a una configuración incorrecta del paquete de paquetes web)

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

Información útil a tener en cuenta al utilizar <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 empresarial lo exige (cuando se proporciona el cuerpo del contenido y el servidor configurado para tiene que representar la página HTML con el contenido proporcionado).

Mientras nos mantenemos dentro de la etiqueta del cuerpo, tenemos que 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, itemPropertyconsulte https://webmasters.stackexchange.com/questions/55130/can-i-use-link-tags-in-the-body-of-an-html-document .