如何使用 express 读取我的 css 文件 node.js

Question

I'm a beginner in express, node.js.

I try to build my app but my style.css file is not read and I don't understand why.

At the beginning, I try to do with.scss but when I search about that, I've learned that it can't possible.

So I transform my style.scss in style.css and it's the same result when I run my app: my style is not apply and in the inspector I've this message:

localhost/:1 Refused to apply style from 'http://localhost:3000/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

When I click on the link 'http://localhost:3000/style.css', this message appear in the tab:

Cannot GET /style.css

Here my code in my index.js:

const express = require('express'); 
const {engine} = require('express-handlebars');
const app = express();
const port = 3000;

app.engine('handlebars', engine({
    layoutsDir:__dirname + '/views/layouts',
}));

app.set('view engine','handlebars');
   
app.get('/', (req,res) => {
    res.render('main', {layout : 'index'})
});
app.use(express.static('public'));

app.listen(port, () => 
console.log(`Notre app est lancée sur : http://localhost:${port}`)
);

In my index.handlebars I have the line in my:

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

In my code, when I ctrl+click on "./style.css", I find the right css file.

Someone can help me?

Answer 1

if you are sure that style.css is in the public folder

the only problem that remains in your index.js code is app.use(express.static('public')); you mast add it before rendering your pages

example:

const express = require('express'); 
const {engine} = require('express-handlebars');

const app = express();
const port = 3000;

app.engine('handlebars', engine({
    layoutsDir:__dirname + '/views/layouts',
}));

app.set('view engine','handlebars');

app.use(express.static('public'));
   
app.get('/', (req,res) => {
    res.render('main', {layout : 'index'});
});

app.listen(port, () => 
console.log(`Notre app est lancée sur : http://localhost:${port}`);
);