HTML does not pull CSS generated by SASS

Asked

Viewed 163 times

0

I’m using express to upload the server and Gulp to generate Sass, Gulp generates the file correctly, but the css is not adopted by HTML. follows code :

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}

My HTML only has this : 

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

I don’t know why he doesn’t adopt the css file, I did some tests and noticed that without the express, he usually picks up the css, which I might be doing wrong ? Calling the express before the page picks up the css ? Someone has already gone through this ?

Console Error:

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.

Folder structure inserir a descrição da imagem aqui

This is the browser status of the http request of style.css, I don’t know why

inserir a descrição da imagem aqui

html css3 express sass gulp

  • Have you checked the browser developer tools for the response to the HTTP request of the CSS file? I would say the folder dist where your CSS is located is not accessible via HTTP and therefore cannot be loaded.

  • Check your folder structure just like Anderson said. If it is possible to paste it here so that we can have an overview of how the project is being organized, it will help to have an answer at first, in case the folder dist is inside the src the HTML you won’t find the file CSS even, because it is coming back a folder before. So the project folder structure can help us to answer.

  • This is the structure... In this case, it finds css, if I open the html file without using express, css works

  • I also acted with the error that appears in the console

1 answer

1


Try:

const express = require('express')
const server = express()

server.use(express.static(__dirname + '/dist'))


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

I added line 3. It makes the express "see" the folder dist.

Then you will be able to access your CSS file like this: http://localhost:3003/Styles/Styles.css

Browser other questions tagged html css3 express sass gulp

You are not signed in. Login or sign up in order to post.