Hoja de estilo no cargada debido al tipo MIME

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?

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".

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.

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.

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.

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">.

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.

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.

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

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:

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

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" >

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

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

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">

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.

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.

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

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?

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

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">

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

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

Entonces cambié a

<base href="/">

Y luego funcionó bien.

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

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

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.

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.

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";

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 .

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.

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.

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

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.

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']
}