4

Fui por um estilo na página e o HTML não usa o arquivo CSS. Primeiro coloquei assim:

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="bootstrap.css">

E no console dava esta mensagem:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:4000/main.css".

Então coloquei: <link rel="stylesheet" type="text/css" href="main.css"> e continuava dando a mesma mensagem.

Troquei para <link rel="stylesheet" type="text/html" href="bootstrap.css"> e a mensagem parou de dart no console, mas meus stylos não funcionam, é como se eu não tivesse chamando nada, e os arquivos estão na mesma pasta da index. O que pode ser?

************ Atualizações ***********

Conforme pediram, segue código do servidor:

var http = require('http').createServer(server);
var fs = require('fs');

function server(req, response){
    response.writeHead(200);
    response.end(fs.readFileSync('view/index.html'));
};

http.listen(4000, function(){
  console.log("x------------------x");
  console.log("x Servidor On-line x");
  console.log("x------------------x");
});`
5
  • O que você está usando para servir os arquivos? O problema está na configuração do servidor que "diz" que o arquivo de estilo é CSS e não HTML.
    – jsbueno
    Commented 11/02/2019 às 15:13
  • Então, eu fiz um servidor rapido com node: var http = require('http').createServer(server); var fs = require('fs'); function server(req, response){ response.writeHead(200); response.end(fs.readFileSync('view/index.html')); }; http.listen(4000, function(){ console.log("x------------------x"); console.log("x Servidor On-line x"); console.log("x------------------x"); });` E é só isso... Commented 11/02/2019 às 15:36
  • @RafaelaCordeiro, não é a melhor opção fazer um servidor "rápido" com o módulo http. Você pode optar pelo express ou http-server. Dito isto, segue um "pequeno" código para solucionar seu problema. stackoverflow.com/a/29046869/9101590 Commented 11/02/2019 às 15:40
  • Pode postar seu arquivo css por favor se não for muito grande. Commented 11/02/2019 às 16:24
  • O problema então está claramente no servidor que você criou. Use um servidor pronto para desenvolvimento - ou poste o código do seu servidor para que possa ser corrigido: é ali que está seu problema específico. (você pode usar a linguagem python instalada no seu sistema para servir arquivos estáticos diretamente: python3 -m http.server 4000 )
    – jsbueno
    Commented 11/02/2019 às 16:29

3 Respostas 3

6

Seu MIME type está errado, não é type="text/html" é type="text/css"

Assim ele não carrega:

<link rel="stylesheet" type="text/html" href="bootstrap.css">

O correto é assim:

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

Uma dica é usar o DevTools do Chrome por exemplo para verificar se o arquivo .CSS carregou corretamente. No Chrome abra seu documento, aperte F12, vai na Aba Network, masque o CSS e depois de de um F5

inserir a descrição da imagem aqui

9
  • Então, eu já fiz isso. Lá eu expliquei: "coloquei: <link rel="stylesheet" type="text/css" href="main.css"> e continuava dando a mesma mensagem. Troquei para <link rel="stylesheet" type="text/html" href="bootstrap.css"> e a mensagem parou de dar no console, mas meus estilos não funcionam. Commented 11/02/2019 às 14:31
  • Iniciei um servidor node e pensei nisso estar dando algum conflito, peguei os arquivos (index e os css's) copiei para uma pasta vazia, abri no navegador e funcionou. Tem algo de errado por conta do servidor? var http = require('http').createServer(server); var fs = require('fs'); function server(req, response){ response.writeHead(200); response.end(fs.readFileSync('view/index.html')); }; http.listen(4000, function(){ console.log("x------------------x"); console.log("x Servidor On-line x"); console.log("x------------------x"); }); Commented 11/02/2019 às 14:38
  • Talves seu server não reconhece esse MIME type... Conferiu se o CSS está aparecendo na Aba Network? De Node eu não entendo nada...
    – hugocsl
    Commented 11/02/2019 às 14:40
  • 1
    @hugocsl, foi a primeira coisa que notei ao olhar as respostas daqui. Infelizmente ainda existem pessoas que querem tirar algum aproveito, mas não sabem que citar a fonte é tão útil quanto expandir o conhecimento. Commented 11/02/2019 às 17:09
  • 1
    Além de alertá-lo você orientou sobre o fato. Acredito que ele já esteja ciente disso. Espero muito que seja leiguice! Commented 11/02/2019 às 17:28
0

Opa então para você poder carregar um arquivo css de um diretório no Node.js você precisar primeiro determinar a pasta estática onde ficam esses arquivos, o que você pode fazer é o seguinte:

  • Criar uma pasta na raiz do projeto chamada public
  • Dentro dessa pasta public você coloca a pasta com os seus arquivos css

Dai no seu app.js você vai colocar o seguinte comando se você estiver utilizando o express

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

E dentro do seu arquivo index html ao invés de ficar:

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

Vai ficar:

<link href="/public/css/style.css" rel="stylesheet" type="text/css" />

Espero que ajude

1
  • E solucionei o caso, mas não usei o express, usei o angular http-server, e dai funcionou. Eu precisava mesmo adicionar um servidor. Eu ainda estou aprendendo Angular, então estou em busca de ver o melhor caminho ainda. Obrigada :) Commented 14/02/2019 às 14:03
-1

Vamos começar com a explicação:

Os navegadores fazem solicitações HTTP para servidores. O servidor então faz uma resposta HTTP.

Ambas as solicitações e respostas consistem em vários cabeçalhos e um corpo (às vezes opcional) com algum conteúdo.

Se houver um corpo, então um dos cabeçalhos é o Content-Type que descreve o que é o corpo (é um documento HTML? Uma imagem? O conteúdo de uma submissão de formulário? Etc.).

Quando você solicita sua folha de estilo, seu servidor está dizendo ao navegador que é um documento HTML (Content-Type: text/html) em vez de uma folha de estilo (Content-Type: text/css).

Mude de Content-Type: text/html:

<link rel="stylesheet" type="text/html" href="bootstrap.css">

para:

<link rel="stylesheet" type="text/css" href="bootstrap.css">
4
  • Então, eu já fiz isso. Lá eu expliquei: "coloquei: <link rel="stylesheet" type="text/css" href="main.css"> e continuava dando a mesma mensagem. Troquei para <link rel="stylesheet" type="text/html" href="bootstrap.css"> e a mensagem parou de dar no console, mas meus estilos não funcionam. Commented 11/02/2019 às 14:31
  • Iniciei um servidor node e pensei nisso estar dando algum conflito, peguei os arquivos (index e os css's) copiei para uma pasta vazia, abri no navegador e funcionou. Tem algo de errado por conta do servidor? var http = require('http').createServer(server); var fs = require('fs'); function server(req, response){ response.writeHead(200); response.end(fs.readFileSync('view/index.html')); }; http.listen(4000, function(){ console.log("x------------------x"); console.log("x Servidor On-line x"); console.log("x------------------x"); }); Commented 11/02/2019 às 14:37
  • 1
    Amigo quando vc copiar a resposta do StackOverflow em inglês é interessante vc pelo menos citar a fonte. Pegar alguma resposta de lá não é problema, o que vc pode considerar ser ético ou não é citar a fonte de onde vc pegou a resposta! Não é um ataque pessoal ok, é só uma dica beleza. []´s
    – hugocsl
    Commented 11/02/2019 às 16:10
  • Beleza! Foi a falta de atenção. Obrigado Commented 11/02/2019 às 16:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .