Pregunta Hoja de estilos no cargada debido a tipo MIME


Estoy trabajando en un sitio web que usa gulp para 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 es   El 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 es correcto):

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

y la hoja de estilos es una fusión entre los estilos bootstrap y font-awesome por ahora (nada personalizado todavía).

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

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

Pero sigo recibiendo el error.

¿Alguna idea de que podría ser? ¿es esto algo (tal vez un ajuste?) para gulp / browsersync tal vez?

Cualquier ayuda es realmente apreciada, y puede pedir más detalles si es necesario.

Gracias


76
2018-01-14 10:52


origen


Respuestas:


Ok, creo que encontré una solución y la estoy escribiendo aquí en caso de que ayude a otra persona.

El problema creo que fue con una biblioteca CSS que comienza con comentarios. Mientras estoy en desarrollo, no minimizo los archivos y no elimino los comentarios, esto significa que la hoja de estilo comenzó con algunos comentarios, haciendo que se vea como algo diferente de css.

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

Una vez más, no estoy 100% seguro de que esto sea una solución, pero sigue siendo una victoria para mí, ya que funciona como se espera ahora.


45
2018-01-15 20:46



make a folder just below/above style.css file según la estructura angular y proporcionar un enlace como <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">  enter image description here


42
2018-03-09 06:41



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

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

Darse cuenta de /public no tiene una barra inclinada al final, por lo que deberá incluirla en su opción href de su html:

href="/css/style.css">

Si incluiste una barra inclinada (/public/) entonces puedes hacer href="css/style.css"

Espero que ayude, Gracias


23
2018-02-07 14:54



Este error también puede aparecer cuando no se está refiriendo a su 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 los segundos) entonces hay una buena probabilidad de que vea este error.


16
2018-05-04 11:34



En Node.js, compruebe el archivo app.js. Tiene una entrada como:

  1. app.use(express.static(__dirname);

o

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

o

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

Tenga en cuenta que en 1 y 2 / public no tiene una barra diagonal al final, por lo que deberá incluirlo en su opción href de su html:

href="/css/style.css"

de lo contrario (tercera opción)

Deberá incluirlo en su opción href de su html:

href="css/style.css"

7
2018-06-25 15:58



También para otros que usan angular-cli y publicar en una subcarpeta en el servidor web, marque esta respuesta:

Cuando se despliegue a una ruta no raíz dentro de un dominio, necesitará actualizar manualmente el <base href="/"> etiqueta en tu dist/index.html.

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

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


5
2018-03-19 16:07



Simplemente hice referencia al archivo css (un tema angular en mi caso) en el estilos sección de mi configuración de construcción angular 6 en angular.json

enter image description here

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


5
2018-06-28 09:05



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

ADEMÁS

Si utiliza NodeJS y configura tus archivos estáticos usando express como:

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

Debe abordar correctamente los archivos.

En mi caso, ambos eran el problema, así que prefijé mis enlaces CSS a "/css/styles.css"

Ejemplo:

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

4
2018-04-09 14:46



Puede abrir las herramientas de Chrome, seleccionar la pestaña de red, volver a cargar su página y buscar la solicitud de archivo de CSS y buscar lo que tiene dentro del archivo. Tal vez hiciste algo mal cuando fusionaste las dos bibliotecas en tu archivo, incluyendo algunos caracteres o encabezados que no son correctos para css.


2
2018-01-14 11:00



mi problema es que estaba usando el 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. Me gusta esto:

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

por lo que siempre resuelve /index.css


2
2018-02-18 22:05



Para la aplicación Node.js Simplemente use esto después de importar todos los mudules necesarios en su archivo de servidor:

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

2
2018-03-05 05:42