having trouble linking css files to jade

Question

I'm aware this question has been asked in various forms but I cannot for the life of me get this seemingly straightforward functionality to work.

What I want is very simple, I want to add a link tag into my.jade files so I can have some styling in my html.

I have been looking around for hours for a solution and am frankly both bored and tired of not being able to find out why this isn't working. Maybe I'm making some really basic typing error or getting the file path wrong but I've been over it so many times that I had to take to SO. I'm prepared for jeering and down votes just to get to the bottom of this.

Here's my file structure:

| server
    | views
        | css
            - style.css
        | img
            - profile-min.jpg
        | partials
            | content
                - footer.jade
                - header.jade
            | meta
                - head.jade
    - 404.jade
    - about.jade
    - index.jade
    - layout.jade
- index.js
- router-module.js

...and my code

index.js

const jade = require("jade");
const http = require("http");
const fs = require("fs");
const path = require("path");
const router = require("./router-module");

const PORT = process.env.PORT || 3000;

http.createServer((req, res) => {
    let template = router(req.url);
    let html = "";
    fs.readFile(template, err => {
        if (err) throw err;
        const fn = jade.compileFile(template, {
            filename: path.join(__dirname, template) // Have to specify the filename to use extends!!
        });
        switch (req.url) {
            case "/":
                html = fn({ title: "Home" });
                break;
            case "/about":
                html = fn({ title: "About Me" });
                break;
            default:
                html = fn({ title: "404 error - file not found" });
                break;
        }
        res.write(html, err => {
            if (err) throw err;
            res.end();
        });
    });
}).listen(PORT);

console.log(`Server running on port ${PORT}`);

router-module.js

const path = require("path");

const router = url => {
    let filePath;
    switch (url) {
        case "/":
            filePath = path.join(__dirname, "views", "index.jade");
            break;
        case "/about":
            filePath = path.join(__dirname, "views", "about.jade");
            break;
        default:
            filePath = path.join(__dirname, "views", "404.jade");
            break;
    }
    return filePath;
};

module.exports = router;

layout.jade

doctype html
html
    head
        include ./partials/meta/head.jade
    body
        include ./partials/content/header.jade
        block content
        include ./partials/content/footer.jade

head.jade

title= title
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible' content='IE=edge')
meta(name='description' content='')
meta(name='viewport' content='width=device-width, initial-scale=1')
link(href="css/style.css" rel="stylesheet" type="text/css")

index.js

extends ./layout.jade

block content
    p This is my website blah blah blah

I am receiving MIME type errors telling me that the style.css file is being interpreted as text/html instead of text/css. All of the page content renders fine and the head tag includes all the meta stuff and the link with the href to the css file.

What am I doing wrong?!

Answer 1

It looks like your path could be incorrect. You're trying to access it relative to the html page with css/styles.css . However, your routing forwards everything else to 404.jade . If it's indeed sending back the 404 page then that's why the MIME type would be text/html.

Does the css file show correctly when you load it directly in the browser? If so, try using /css/styles.css as the href in your link instead.