Home > Software design >  Express.js cant apply stylesheet
Express.js cant apply stylesheet

Time:11-23

When running my HTML ExpressJS code i have ran into an issue to do with CSS. When i go to dev tools in the browser i see Refused to apply style from 'https://localhost:5000/public/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Code:

ExpressJS

const app = express();
app.use(express.static('public'));
app.get('/', (req,res) => {
    res.sendFile('/home/pi/website/index.html');
});

app.listen(5000, () => console.log('http://localhost:5000'));

HTML:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title>homepage</title>
  <link rel="stylesheet" type="text/css" href="public/style.css" media="screen" />
  </head>
  <body>
    <h1 class=title>Hello!</h1>
    <h1 class=title>This page is running NodeJS on a Raspberry Pi 4 4GB</h1>
  </body>
</html>

CodePudding user response:

Your link:

href="public/style.css"

will not work with

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

because that will be looking inside the public directory for public/style.css in your server file system which means it's actually looking for public/public/style.css and I assume you don't have the file system set up that way. You don't show exactly where style.css is in your server file system, but if it's directly in the public directory you are pointing express.static() at, then you should be using:

href="/style.css"
  • Related