Folha de estilo não carregada devido ao tipo MIME

384

Estou trabalhando em um site usado gulppara compilar e sincronizar o navegador para manter o navegador sincronizado com minhas alterações.

A tarefa gulp compila tudo corretamente, mas no site, não consigo ver nenhum estilo, e o console mostra esta mensagem de erro:

Recusou-se a aplicar o estilo de ' http: // localhost: 3000 / assets / styles / custom-style.css ' porque seu tipo MIME ('text / html') não é um tipo MIME da folha de estilo suportada e a verificação rigorosa de MIME está ativada.

Agora, eu realmente não entendo por que isso acontece.

O HTML inclui o arquivo como este (que tenho certeza de que está correto):

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

E a folha de estilo é uma fusão entre o Bootstrap e os estilos incríveis de fontes por enquanto (nada personalizado ainda).

O caminho também está correto, pois esta é a estrutura da pasta:

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

Mas continuo recebendo o erro.

O que poderia ser? Isso é algo (talvez uma configuração?) Para gulp / browsersync, talvez?

usuario
fonte
Eu estava entendendo isso quando minha folha de estilo vinculada começou com uma tag html <style ... em vez de simplesmente ir direto para as regras de estilo. Também obtive isso ao vincular um arquivo html carregado mais tarde (AngularJS), então mudei para o carregamento dinâmico no carregamento da página via JavaScript e o problema desapareceu.
Newclique
82
Isso acontece quando você define um URL incorreto para o arquivo ou quando o servidor não está configurado corretamente. No resultado, o navegador NÃO obtém a folha de estilo, mas obtém um pouco de HTML com status 404 e com o cabeçalho "Content-Type". Como o navegador obtém algo do servidor, ele não informa que não há resposta, mas informa que o tipo MIME do arquivo está incorreto. A maneira mais rápida de verificar isso é apenas tentar abrir o arquivo diretamente http://localhost:3000/assets/styles/custom-style.cssem uma nova guia.
RussCoder 12/09
6
Para mim, foi o caso descrito pela RussCoder. A razão por trás disso foi que usei o Angular e esqueci de adicionar um arquivo css ao empacotamento de estilos no angular.json. Por isso, foi ignorado durante a criação do aplicativo.
Jana
11
Eu poderia consertar esse problema com as configurações de segurança da primavera. Estava bloqueando o acesso à pasta de recursos.
sndu
2
Uma proxy.conf.jsonconfiguração incorreta nos levou a esse erro estranho, uma vez que o encaminhamento da solicitação para a API de back-end não estava funcionando corretamente, portanto, a resposta ao erro HTML.
ktsangop

Respostas:

139

Para aplicativos Node.js, verifique sua configuração:

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

Observe que /publicnão há uma barra no final; portanto, você precisará incluí-la na opção href do seu HTML:

href="/css/style.css">

Se você incluiu uma barra ( /public/), basta fazer href="css/style.css".

JPaulino
fonte
href = "/ assets / style.css"> no meu caso resolveu o problema!
Sergio Guerjik 01/03
127

A questão, eu acho, era com uma biblioteca CSS começando com comentários.

Enquanto em desenvolvimento, não minifico arquivos e não removo comentários. Isso significava que a folha de estilo começou com alguns comentários, fazendo com que ela fosse vista como algo diferente do CSS.

Remover a biblioteca e colocá-la em um arquivo de fornecedor (sempre SEMPRE reduzido sem comentários) resolveu o problema.

Novamente, não tenho 100% de certeza de que isso seja uma correção, mas ainda é uma vitória para mim, pois funciona como esperado agora.

usuario
fonte
4
Uma meia correção, porque se você não deseja colocar todo esse CSS no fornecedor, o que você deve fazer? Minimizar os node_modules toda vez que você testar seu aplicativo? Doh ... Você encontrou algo para compilar apenas um determinado módulo?
SteamFire ​​23/03
11
No meu processo de compilação, o arquivo do fornecedor é criado apenas na compilação e, em seguida, apenas observo as alterações nos arquivos em que estou trabalhando (o que geralmente não é nada do fornecedor). Isto significa que a primeira compilação é um pouco mais lento, mas então eu apenas compilar meus arquivos sem minification que não está a abrandar o processo para mim
Nick
3
Corri para o mesmo problema e descobri que estava tentando carregar uma versão minificada do arquivo que estava presente no servidor como um arquivo não minificado. Então, eu estava tentando carregar "custom-style.min.css" quando o arquivo no servidor era "custom-style.css". Depois de alterar meu link para carregar o recurso correto, tudo funcionou bem.
programador Dan
O problema não está limitado ao CSS. Eu também recebi um 404 em um arquivo JS que foi causado por um comentário na primeira linha.
Preto
80

Este erro também pode surgir quando você não está se referindo ao seu arquivo CSS corretamente.

Por exemplo, se sua tag de link for

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

mas seu arquivo CSS for nomeado style.css(sem os segundos), há uma boa chance de você ver esse erro.

John Deverall
fonte
4
Exatamente o que aconteceu comigo. Tentei todas as respostas aqui (altere o tipo de mimet, remova comentários CSS, altere a configuração do node.js.). Tudo o que eu precisava fazer era corrigir um erro de digitação no nome do CSS. Doh!
AJPerez
5
Para adicionar a essa resposta, verifique se o gulp realmente encontrou o arquivo css e o direcionou para o seu dist. Sempre que recebo esse erro, é porque eu estraguei meu caminho para os arquivos css de alguma forma e ele simplesmente não existe no diretório build.
LAdams87
5
Sim, o mesmo para mim, um erro simples e estúpido. Eu acho que o servidor envia uma página de resposta 404, para que o seu navegador obtenha a página 404 e diga que não é o CSS adequado ... o que é verdade.
tanou
62

Na maioria dos casos, isso pode ser simplesmente o caminho do arquivo CSS está errado . Portanto, o servidor da web retorna status: 404com alguma Not Foundcarga útil de conteúdo do htmltipo.

O navegador segue esse caminho (errado) da <link rel="stylesheet" ...>tag com a intenção de aplicar estilos CSS. Mas o tipo de conteúdo retornado contradiz, para que ele registre um erro.

Digite a descrição da imagem aqui

Tharaka
fonte
Meu problema foi que o caminho era inválido. Mas, esse caminho ruim foi causado pelo href base definido para o meu projeto angular estar incorreto. Se alguém mais começou a ver esse erro após atualizar sua href base, pode ser a causa.
Krejko
11
Obrigado por se esforçar para documentar de forma completa e clara como um erro 404 no arquivo CSS pode produzir essa mensagem de erro intrigante (inicialmente)
Velojet 15/01/19
11
outra maneira de solucionar problemas, cole o URL que você está recebendo este erro no em outra guia, se você não está vendo CSS, esta é provavelmente a questão
BlackICE
Do que você para a sua dica
Jason Zhou
52

Crie uma pasta logo abaixo / acima do arquivo style.css conforme a estrutura Angular e forneça um link como <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">.

Digite a descrição da imagem aqui

Gopi GA
fonte
23
Por que isso funciona? O erro afirma que "text / html" não é um tipo MIME suportado.
James Bateson 27/03
6
No meu caso o erro foi embora, os estilos CSS, no entanto, não são aplicadas ..: /
Andru
2
Eu passei aome mais tempo lendo sobre este problema e alterar o tipo de um arquivo css ibto algo mais pode causar problemas graves, como CSS ser lido como html pelo servidor
Nick
No AngularDart, a raiz do index.html é a pasta 'web' e não a pasta principal do projeto. Portanto, todos os arquivos css devem estar dentro da pasta da web. Como este "[pasta do projeto] \ web [seus arquivos de arquivos aqui]". Portanto, se você tentar importar um arquivo css localizado fora da pasta da web, ele não será encontrado.
Wael
40

Eu tive esse erro para um modelo de Bootstrap.

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

Então eu removi rel="stylesheet"o link, ou seja:

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

E tudo funciona bem. Tente isso se você estiver usando modelos de Bootstrap.

Amandeep Saini
fonte
3
Boa pegada. O erro se foi agora.
21918 Rich
11
De acordo com o padrão de vida (4.2.4) , "Um elemento de link deve ter um atributo rel ou um atributo itemprop, mas não ambos." Portanto, remover o relatributo apenas remove a funcionalidade de incluir uma folha de estilo.
Artjom B.
estranhamente isso funcionou para mim.
35

Eu mudei meu 'href' -> 'src'. Então a partir disso:

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

para isso:

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

Funcionou. Não sei por que, mas funcionou.

Sebastian Voráč
fonte
11
Embora tenha funcionado para mim também, esse é um atributo válido?
Sr9yar 31/10/19
11
@ sr9yar Você está certo de que, de acordo com o validator.w3.org , não é válido ter o src no link, por isso é bom como um hotfix rápido, mas assim que você tiver um pouco mais de tempo, sugiro encontrar outro solução alternativa válida.
Sebastian Voráč
20

Os comentários no seu arquivo farão o trip. Alguns minifiers não removerão os comentários.

ALÉM DISSO

Se você usa o Node.js e define seus arquivos estáticos usando express:

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

Você precisa endereçar corretamente os arquivos.

No meu caso, ambos foram o problema, então prefixei meus links CSS com "/css/styles.css".

Exemplo:

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

Esta solução é perfeita, pois o caminho é a principal questão para o CSS não ser renderizado

metal_jacke1
fonte
18

Simplesmente referenciei o arquivo CSS (um tema Angular no meu caso) na seção de estilos da minha configuração de compilação Angular 6 em angular.json:

Digite a descrição da imagem aqui

Isso não responde à pergunta, mas pode ser uma solução alternativa adequada, como foi para mim.

dvlsc
fonte
3
Isso é a resposta correta para Angular-CLI 6 projetos
Torsten Barthel
14

Como as soluções mencionadas neste post, algumas das soluções funcionaram para mim, mas o CSS não se aplica à página.

Simplesmente, mudei o diretório "css" para o diretório "Assest /" e tudo funciona bem.

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/site.css" >
Jitendra G2
fonte
Impressionante (Y) fixo meu problema
Chakri
12

Também para outras pessoas usando a Angular-CLI e publicando em uma subpasta no servidor da web, verifique esta resposta:

Ao implantar em um caminho não raiz em um domínio, você precisará atualizar manualmente a <base href="https://stackoverflow.com/">tag no seudist/index.html.

Nesse caso, você precisará atualizar para <base href="https://stackoverflow.com/sub-folder/">

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

simonberry
fonte
10

Meu problema é que eu estava usando o webpack e, no meu link HTML CSS, tinha um caminho relativo e sempre que navegava para uma página aninhada, resolvia o caminho errado:

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

então a solução mais simples foi remover o .que o meu é um aplicativo de página única .

Como isso:

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

por isso resolve sempre /index.css

Jared
fonte
Sim, no meu caso, esqueci de remover esses caminhos relativos do meu arquivo index.html e estava executando o webpack no modo de produção. Esses caminhos não são necessários, pois o webpack vincula os arquivos css dinamicamente através do webpack.prod.js.
Kewal Shah
10

Eu tive esse problema com um site que eu sabia que funcionava online quando o mudei para localhost e PhpStorm.

Isso funcionou bem online:

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

Mas, para o host local, eu precisava me livrar da barra:

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

Portanto, estou reforçando algumas respostas já fornecidas aqui - é provável que seja um erro de ortografia ou caminho, em vez de qualquer problema complicado de configuração do servidor. O erro no console é um arenque vermelho; a guia de rede precisa ser verificada primeiro pelo 404.

Entre as respostas fornecidas aqui estão algumas soluções que não estão corretas. A adição type="text/html"ou alteração hrefparasrc não é a resposta.

Se você deseja ter todos os atributos para que ele valide os mais exigentes validadores e seu IDE, o valor da mídia deve ser fornecido e reldeve ser stylesheet, por exemplo:

    <link rel="stylesheet" href="css/additional.css" type="text/css" media="all">
Gato de Henry
fonte
9

Eu sei que pode estar fora de contexto, mas vincular um arquivo inexistente pode causar esse problema, como aconteceu comigo antes.

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

Se esse arquivo não existir, você enfrentará esse problema.

Safwat Fathi
fonte
8

Eu tive o mesmo problema.

Se a estrutura do seu projeto é como a seguinte árvore:

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

Eu recomendo adicionar o seguinte pedaço de código em server.js:

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

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

Nota: Path é um módulo interno do Node.js. Portanto, não é necessário instalar este pacote via npm.

Mostafa Ghadimi
fonte
7

Adicionando uma longa lista de respostas, esse problema também aconteceu comigo porque eu não sabia que o caminho estava errado do ponto de vista da sincronização do navegador.

Dada esta estrutura de pastas simples:

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

o hrefinterior atributo <link>no index.htmltem que ser app/styles/style.csse nãostyles/style.css

Stig Perez
fonte
De fato, apenas um erro de digitação no caminho me deu o mesmo erro.
Julesezaar
uau isso funcionou para mim, muito obrigado. Eu estava literalmente prestes a desistir
Vash
7

Você pode abrir as ferramentas do Google Chrome, selecionar a guia rede, recarregar sua página e encontrar a solicitação de arquivo do CSS e procurar o que ele tem dentro do arquivo.

Talvez você tenha feito algo errado ao mesclar as duas bibliotecas no seu arquivo, incluindo alguns caracteres ou cabeçalhos que não são apropriados para CSS?

Yunior González Santana
fonte
11
Infelizmente eu tentei isso, mas não é realmente ajudar, a solicitação falhar instantaneamente e só tem a url pedido (que é correto)
Nick
6

Caso você esteja usando o Express sem JS, tente com:

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

Como exemplo, meu arquivo CSS está em public/stylesheets/app.css

Tal Hakmon
fonte
5

Para um aplicativo Node.js., use isso depois de importar todos os módulos necessários no seu arquivo de servidor:

app.use(express.static("."));
  • função de middleware embutida express.static no Express e isso no seu arquivo .html: <link rel="stylesheet" href="style.css">
Purav Barot
fonte
3
Você realmente não deseja fornecer o código do servidor ao público, não é?
Ki Jéy
5

Tive o mesmo problema e verifiquei que escrevi:

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

Então eu mudei para

<base href="/">

E então funcionou bem.

VIKAS KOHLI
fonte
4

Remova rel = "stylesheet" e adicione type = "text / html". Então ficará assim -

<link  href="styles.css" type="text/html" />
Sanjay Choubey
fonte
Finalmente, uma resposta que funcionou para mim. Obrigado!
Richard Witherspoon
4

No meu caso, quando eu estava implantando o pacote ao vivo, ele estava fora da pasta HTML pública. Foi por uma razão.

Mas, aparentemente, uma verificação rigorosa do tipo MIME foi ativada e não tenho muita certeza se está do meu lado ou pela empresa em que estou hospedando.

Mas assim que mudei a pasta de estilo no mesmo diretório do arquivo index.php, parei de receber o erro e o estilo foi ativado perfeitamente.

Jabulani
fonte
4

Estilos de inicialização não carregando # 3411

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

  1. Eu instalei o Bootstrap v. 3.3.7

    npm install bootstrap --save
  2. Em seguida, adicionei os arquivos de script necessários apps[0].scriptsno arquivo 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. Eu reiniciei ng servir

Funcionou para mim.

HSN KH
fonte
4

se o navegador não conseguir encontrar o arquivo css relacionado, ele poderá fornecer esse erro.

Se você usa o aplicativo Angular, não precisa colocar o caminho do arquivo css em index.html

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

Você pode colocar o caminho do arquivo CSS relacionado no arquivo styles.css.

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";
Ahmet Arslan
fonte
Esta foi a correção para mim, remova o link href de index.html e usei o método de importação no styles.scss.
IronWorkshop
3

Um dos principais motivos para o problema é o arquivo CSS que está tentando carregar não é um arquivo CSS válido.

Causas:

  • Tipo MIME inválido
  • Ter código JavaScript dentro da folha de estilos - (pode ocorrer devido à configuração incorreta do empacotador de Webpack)

Verifique se o arquivo que você está tentando carregar é uma folha de estilo CSS válida (obtenha a URL do servidor do arquivo na guia rede e clique em uma nova guia e verifique).

Informações úteis para consideração ao usar <link> dentro da etiqueta do corpo.

Embora ter uma linketiqueta dentro do corpo não seja a maneira padrão de usá-la. Mas podemos usá-lo para otimização de página (mais informações: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ) / se o caso de uso de negócios exigir (quando você atender o corpo do conteúdo e do servidor configurado para precisa renderizar a página HTML com o conteúdo fornecido).

Mantendo dentro da tag body, temos que adicionar o atributo itemPropertyna linktag como

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

Para obter mais informações itemProperty, consulte /webmasters/55130/can-i-use-link-tags-in-the-body-of-an-html-document .

BALA
fonte
3

entrando no console do meu navegador> rede> style.css ... clicamos nele e ele mostrava "não é possível obter / caminho / para / meu / CSS", isso dizia que meu link estava errado. Eu mudei isso para o caminho do meu arquivo CSS.

O caminho original antes da mudança foi localhost: 3000 / Example / public / style.css, alterando-o para localhost: 3000 / style.css, resolvido.

se você estiver exibindo o arquivo em app.use (express.static (path.join (__ dirname, "public"))); ou app.use (express.static ("public")); seu servidor passaria "essa pasta" para o navegador, portanto, adicionar um link "/seuCssName.css" no navegador o resolveria

Ao adicionar outras rotas no link CSS do seu navegador, você estará instruindo o navegador a procurar o css na rota especificada.

em resumo ... verifique para onde o link CSS do navegador aponta.

bahri noredine
fonte
2

Se você estiver configurando estilos no 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);

Em seguida, basta alterar cssLint.type (indicado pela seta na descrição acima) para "MIME":

   cssLink.type = "MIME";

Isso ajudará você a se livrar do erro.

Shriram
fonte
2

Esse problema ocorre quando você está usando a ferramenta cli para reactjs ou angular, portanto, a chave é copiar toda a compilação final dessas ferramentas, pois elas inicializam seus próprios servidores lite, o que confunde seus URLs com o servidor back-end que você criou ... pegue essa pasta de compilação inteira e despeje-a na pasta de ativos do seu projeto de servidor back-end e refira-a do seu servidor back-end e não do servidor que acompanha Angular ou Reactjs. Caso contrário, você está usando-o como front-end de um determinado Servidor API

ndoty
fonte
2

Me deparei com esse problema com o mesmo problema ao adicionar uma aparência personalizada a um fluxo de usuário do Azure B2C. O que descobri foi que a raiz à qual a página html se referia era ../oauth/v2 (ou seja, o caminho do servidor oauth) e não o caminho para o meu armazenamento bob.

Colocar o URL completo das páginas corrigiu o problema para mim.

Liam
fonte
2

Verifique se você tem uma compactação ativada ou desativada. Se você o usar ou alguém habilitado, app.use(express.static(xxx))não ajudará. Verifique se o servidor permite compactação.

Comecei a ver o erro semelhante ao adicionar o Brotli e os plugins de compressão ao meu Webpack. Então, seu servidor também precisa suportar esse tipo de compactação de conteúdo.

Se você estiver usando o Express, o seguinte deverá ajudar:

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

O módulo é chamado: express-static-gzip

Minhas configurações são:

const gzipOptions = {
  enableBrotli: true,
  customCompressions: [{
  encodingName: 'deflate',
  fileExtension: 'zz'
 }],
 orderPreference: ['br']
}
Greg Woz
fonte