Estou usando express pra subir o server e gulp pra gerar o sass, o gulp gera corretamente o arquivo, porém, o css não é adotado pelo HTML. segue código :
Express : const express = require('express') const server = express()
server.get('/', (req, res) => {
res.sendFile(__dirname + '/src/index.html')
});
server.get('/sobre', (req, res) => {
res.sendFile(__dirname + '/src/sobre.html')
});
server.listen(3003, () => {
console.log('Servidor em pé em: localhost:3003')
})
Css
body{background-color:peru}
Meu HTML só tem isso :
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../dist/styles/styles.css">
<title>Oi, eu sou o Goku</title>
</head>
<body>
<h1>Oi, eu sou o Goku!</h1>
<img src="https://vignette.wikia.nocookie.net/deathbattlefanon/images/2/20/C0A9B238-91F6-46AA-ABDC-3FC720228C25.png/revision/latest?cb=20171104014554" alt="Goku">
</body>
</html>
Não sei por que ele não adota o arquivo css, fiz testes e notei que, sem o express, ele pega o css normalmente, o que posso estar fazendo errado ? Chamando o express antes da pagina pegar o css ? Alguém já passou por isso ?
Erro do Console:
Refused to apply style from 'http://localhost:3003/dist/styles/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Esse é o status no browser, da requisição http do style.css, não sei porquê
dist
onde se encontra o seu CSS não está acessível via HTTP e por isso não consegue ser carregada.dist
esteja dentro dasrc
oHTML
não vai achar o arquivoCSS
mesmo, pois está voltando uma pasta antes. Por isso a estrutura de pasta do projeto pode nos ajudar a responder.