Question 266462 in Html Question posted in
Some basic documentation can be found here.

Node.js express server not able to read css files in my html

I’ve made a node.js server and its working to send an image and a css file along with my html website. The image loads fine but I get a popup on Firefox that says style-sheet could not be loaded. For debugging I put the same css path in a Iframe it opens just fine.

Here is my html

<!DOCTYPE html>
<html>
  <head>
    <title>Repo</title>
    <!-- DOESNT WORK!!! -->
    <style src="style.css" type="text/css"></style> 
  </head>

  <body style="margin: 0;">
    <img src="MazeBackground.png" alt="" srcset="">
    <iframe src="style.css" frameborder="0"></iframe>
    <!-- WORKS!?!?!?!? -->
  </body>
</html>

and here is my node

const express = require("express");
const path = require("path");
const mime = require("mime");
const app = express();


app.get("/", (req, res) => {
  app.use(express.static('public'))
  res.sendFile(path.join(__dirname, "./public/index.html"));
});

app.listen(3000, () => console.log("server is listening on port 3000."));

I tried setting the mimetype to text/css and sending the css file on its own. I just ended up breaking everything.

Tags:

2

Answers


  1. 0

    You dont need the <style> tag, it is for inline CSS. What you need is the <link> tag.

    HTML <link> tag requires href instead of src.
    So you have to modify your code accordingly:

    
<link rel="stylesheet" href="style.css">

    W3Schools reference: w3schools reference

    Login or Signup to reply.
  2. 0

    you must create your server like this:

    const express = require("express");
const path = require("path");
const mime = require("mime");
const app = express();

app.use(express.static('public')) // put static middleware outside of get route
app.get("/", (req, res) => {
  
  res.sendFile(path.join(__dirname, "./public/index.html"));
});

app.listen(3000, () => console.log("server is listening on port 3000."));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search