Node.js css refused to apply

Question

I'm building a very simple application, I was just setting up the project when i ran into this problem. I have a simple localhost server and an html to render, but when I access the localhost I get this error on the console: Refused to apply style from 'http://localhost:8080/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I checked this other answer but didn't understand what's the problem so I couldn't solve mine.

The structure of my project follows this:

Project
  js
    server.js
  views
    index.html
    style.css

The files contains the following code:

server.js:

const express = require('express');
const dotenv = require('dotenv');
const path = require('path');

dotenv.config({ path: './../config.env' });
const app = express();

app.use(express.static(__dirname + '/views'));

const port = process.env.PORT || 8080;
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '../views', 'index.html'));
});

app.listen(port, () => {
  console.log(`App running on port ${port}`);
});

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="/style.css" />
  </head>
  <body>
    <button class="btn"></button>
  </body>
</html>

style.css:

.btn {
  background-color: red;
}

So, I was expecting for that button to have a red background color, but instead ran into that error. Any help is appreciated!

The error is telling you exactly what the problem is: your CSS file is being served with the wrong MIME type. It's *probably* the case that it's not finding the file at all, and thus returning a 404 error HTML page. — Pointy, Mar 22 '23 at 13:20
Hi, @Pointy! Thanks for your answer. Yes, I understand the error but, after reading the other post, I'm not understanding how to solve it. Why is it being set with a wrong MIME type if the file is a .css file? and the href should be correct — David Jimenez, Mar 22 '23 at 13:24
If you look your browsers Network tab, what does it say for the request -> `style.css`? — Keith, Mar 22 '23 at 13:35
`app.use(express.static(__dirname + '/views'));` I assume you meant to do -> `app.use(express.static(path.join(__dirname, '../views')));` here. Otherwise it's looking for `views` directory relative to your `js` directory.. — Keith, Mar 22 '23 at 13:38
@Keith on the network Tab I get a `404 not found` for request URL: `localhost:8080/style.css`. I noticed this url is incorrect, so I already tried modifying the code so the Request Url is `localhost:8080/views/style.css`, but didn't work either — David Jimenez, Mar 22 '23 at 13:49
@Keith Your right, changing from `app.use(express.static(__dirname + '/views'));` to `app.use(express.static(path.join(__dirname, '../views')));` fixed it. I'm pretty new into express, sorry for this mistake and thank you! Post it as answer so I can mark it as yours — David Jimenez, Mar 22 '23 at 13:52

score 3 · Accepted Answer · answered Mar 22 '23 at 14:05

Your problem was just the path you sent to static.

app.use(express.static(__dirname + '/views'));

__dirname will be the path of your js file, so what you was saying here is /js/views/, but what you really want is up one directory and then views.

You can use the same technique as you used in your get('/'.. and use path.join to get your views directory.

eg.

app.use(express.static(path.join(__dirname, '../views')))

Node.js css refused to apply

1 Answers1