Folha de estilo não carregada devido ao tipo MIME

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?

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

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.

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.

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.

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

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.

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.

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

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:

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

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

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

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

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

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.

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.

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

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?

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

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

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.

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

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

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.

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.

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

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 .

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.

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.

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

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.

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