ExpressJS not applying CSS on certain routes-CodePudding

When I go to localhost:3000 my css works, but when I go to localhost:3000/r/test my css doesn't work and I get this message:

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

Anytime I have a route where the path is longer than one sub path (I'm not sure if that's even the right term), my css doesn't work at all. For example these routes would work:

app.get('/', (req, res) => {
    ...
)
app.get('/cats', (req, res) => {
    ...
)
app.get('/dogs', (req, res) => {
    ...
)

But these won't work:

app.get('/cats/test', (req, res) => {
    ...
)
app.get('/dogs/blah', (req, res) => {
    ...
)
app.get('/hamster/foo', (req, res) => {
    ...
)

My index.js file:

const express = require('express');
const path = require('path');
const axios = require('axios');
const app = express();

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname   '/views'));

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
  res.render('home');
});

app.get('/r/test', (req, res) => {
  res.render('test');
});

app.listen(3000, () => {
  console.log(`Listening at http://localhost:3000`);
});

My test.ejs file:

<!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">
  <link rel="stylesheet" href="styles.css">
  <title>Test</title>
</head>
<body>
  <h1>Hi<h1>
</body>
</html>

The structure of my project is:

Project
 |
  -- public
 |   |
 |    --styles.css
 |
  -- views
 |  |  
 |   -- home.ejs
 |   -- test.ejs
 |
  --index.js

CodePudding user response：

Put CSS file in the public directory and add / in href of link like

<link rel="stylesheet" href="/styles.css">

Now it will request to localhost:3000/style.css every time no matter where you are on the page

/ point to the root directory

CodePudding user response：

It would be better to have a separate path to serve the static files

Change static path to

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

and in the ejs file use it as

<link rel="stylesheet" href="/static/styles.css">