html - valido - tipo mime aspx
Hoja de estilo no cargada debido al tipo MIME (30)
Los estilos de Bootstrap no se cargan # 3411
https://github.com/angular/angular-cli/issues/3411
-
Instalé Bootstrap v. 3.3.7
npm install bootstrap --save -
Luego agregué los archivos de script necesarios a las
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" ], -
Reinicié ng servir
Funcionó para mi.
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 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 los 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 (tal vez una configuración?) Para gulp / browsersync tal vez?
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 atributo
href
dentro de
<link>
en
index.html
tiene que ser
app/styles/style.css
y no
styles/style.css
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" >
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.
Elimine rel = "stylesheet" y agregue type = "text / html". Entonces se verá así:
<link href="styles.css" type="text/html" />
En la mayoría de los casos, esto podría ser simplemente que la
ruta del archivo CSS es incorrecta
.
Por lo tanto, el servidor web devuelve el
status: 404
con una carga útil de contenido
Not Found
de tipo
html
.
El navegador sigue esta ruta (incorrecta) desde la etiqueta
<link rel="stylesheet" ...>
con la intención de aplicar estilos CSS.
Pero el tipo de contenido devuelto contradice, por lo que registra un error.
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.
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.
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.
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.
La solución de este hilo resolvió mi problema:
No estoy seguro de si esto ayudará a alguien, pero si está utilizando angular-cli, lo arreglé eliminando la referencia CSS de mi index.html y agregándola al archivo angular-cli.json en la parte "estilo". Después de reiniciar mi servidor web, ya no tuve ese problema.
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
como:
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
Me encontré con este problema.
Me negué a aplicar el estilo de '' http://m.b2b-v2-pre1.jcloudec.com/mobile-dynamic-load-component-view/resource/js/resource/js/need/layer.css?2.0 '' porque su tipo MIME (''text / html'') no es un tipo MIME de hoja de estilo compatible, y está habilitada la comprobación estricta de MIME.
Cambiar la ruta podría resolver este problema.
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 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 se resuelve en
/index.css
Para aplicaciones Node.js, verifique su configuración:
app.use(express.static(__dirname + ''/public''));
Tenga en cuenta que
/public
no 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 hacer
href="css/style.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 express.static incorporada en Express y esto en su archivo .html: <
link rel="stylesheet" href="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?
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.
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 la etiqueta
<base href="/">
en su
dist/index.html.
En este caso, deberá actualizar a
<base href="/sub-folder/">
Traté de reiniciar mi máquina con Windows y reinstalé el "npm i".
Funcionó para mi.
Tuve el mismo problema y después de horas de depuración descubrí que está relacionado con archivos temporales que no se pueden escribir.
Vaya a Admin → Configuración → Sistema de archivos . Establecer el directorio temporal correcto. Asegúrese de que su servidor tenga permiso para escribir en ese directorio.
Tuve el mismo problema y luego verifiqué que escribí:
<base href="./">
en index.html
Entonces cambié a
<base href="/">
Y luego funcionó bien.
Tuve el mismo problema, y en mi caso se debió al hecho de que intenté importar manualmente archivos CSS en el archivo HTML (como siempre hacemos con sitios web estáticos), cuando de hecho los archivos tenían que ser importado en el archivo JavaScript del punto de entrada utilizado por Webpack.
Cuando las hojas de estilo se importaron al archivo JavaScript principal, en lugar de escribirse manualmente en el HTML, todo funcionó como se esperaba.
Tuve este error para una plantilla Bootstrap.
<link href="starter-template.css" rel="stylesheet">
Luego
rel="stylesheet"
el
rel="stylesheet"
del enlace, es decir:
<link href="starter-template.css">
Y todo funciona bien. Pruebe esto si está utilizando plantillas Bootstrap.
Tuve este error, en Angular. La forma en que lo resolví fue poner un ngIf en mi elemento de enlace para que no apareciera en el DOM hasta que se completara mi URL dinámica.
Puede que no esté relacionado con el OP un poco, pero terminé aquí buscando una respuesta.
<link *ngIf="cssUrl" rel="stylesheet" type="text/css" [href]="sanitizer.bypassSecurityTrustResourceUrl(cssUrl)">
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 de
type="text/html"
o cambiar
href
a
src
no es la respuesta.
Si desea tener todos los atributos para que se valide en los validadores más exigentes y su IDE, entonces se debe proporcionar el valor de los medios y el
rel
debe ser una
stylesheet
, por ejemplo:
<link rel="stylesheet" href="css/additional.css" type="text/css" media="all">
Una de las principales razones del problema es que el archivo CSS que intenta 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)
Verifique 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 nueva pestaña y verifique).
Información útil para tener en cuenta al usar <link> dentro de la etiqueta del cuerpo.
Aunque tener una etiqueta de
link
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
itemProperty
en la etiqueta de
link
como
<body>
<!-- … -->
<link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
<!-- … -->
</body>`
Para obtener más información sobre
itemProperty
consulte
https://webmasters.stackexchange.com/questions/55130/can-i-use-link-tags-in-the-body-of-an-html-document
.
Verifique tres veces el nombre y la ruta del archivo. En mi caso, tenía algo como este contenido en la carpeta de destino:
lib
foobar.bundle.js
foobr.css
Y este enlace:
<link rel="stylesheet" href="lib/foobar.css">
Supongo que el navegador estaba intentando cargar el archivo JavaScript y se quejaba de su tipo MIME en lugar de darme un error de archivo no encontrado.