How to make jade loading the css file? (It doesn't work)

Question

Here is my directory

newTab.jade code

doctype html
html
    head
        title New Tab
        link(rel = 'stylesheet', type = 'text/css', href = '/public/index.css')
    body
        p hello world

index.css code

p{
    background-color: black;
    color: white;
}

app.js code

const express = require('express');
const app = express();
const port = 3000;
app.locals.pretty = true;
app.listen(port, function(){
    console.log("Server Connected port: "+port);
});

app.set('view engine', 'jade');
app.set('views', './views');

app.get('/', function(req, res){
    res.render('newTab');
});

jade file can't loading css file. I tried href = "/public/index.css" but it doesn't work too.

Check the network tab. Can you observe a request to the CSS file or no? — Eldar, Jul 23 '20 at 06:15
In the developer tools of your browser (F12), there is a network tab that logs the requests a page makes. Open that tab then refresh the page and see what kind of requests that your page makes. — Eldar, Jul 23 '20 at 06:17
2localhost/:1 Refused to apply style from 'http://localhost:3000/index.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. — Suee97, Jul 23 '20 at 06:19
That error usually means the css file can not be found. Your express configuration doesn't include any static file configuration. Refer [this](https://expressjs.com/en/starter/static-files.html) for further information. — Eldar, Jul 23 '20 at 06:27

score 2 · Accepted Answer · answered Jul 23 '20 at 08:35

Append a middleware to Express to serve static files too.

In your app.js file:

// require path module to join your public folder with __dirname
const path = require('path');

//...

app.get('/', function(req, res){
    res.render('newTab');
});

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

There are more things express.staticcan do. E.g. setting the maxAge for caching purpose:

// 31557600000ms = 1 year
app.use('/', express.static(path.join(__dirname, 'public'), { maxAge: 31557600000 }));

This is the solution :) – avcajaraville Jul 23 '20 at 08:36 — avcajaraville, Jul 23 '20 at 08:36

score 0 · Answer 2 · answered Jul 23 '20 at 06:17

0

suggestion

try

doctype html
html
    head
        title New Tab
         include index.css
    body
        p hello world

on your newTab.jade file

and include index.css on views directory

answered Jul 23 '20 at 06:17

meBe

154
9

`app.set('views', './views');` on app.js file means include views file are on views directory – meBe Jul 23 '20 at 06:19
discard `link(rel = 'stylesheet', type = 'text/css', href = '/public/index.css')` on newTab.jade file – meBe Jul 23 '20 at 06:19
"include" tag just loading "text" // p{backgroud.... } is returned at page – Suee97 Jul 23 '20 at 06:20
@SeungUnOh indent for few spaces – meBe Jul 23 '20 at 06:21
@SeungUnOh there should be a space below title – meBe Jul 23 '20 at 06:26
title has modified lik "New Tabp{background..." I think it doesn't work – Suee97 Jul 23 '20 at 06:27
@SeungUnOh jade has a concept with indentation. jade syntax rules [here](https://naltatis.github.io/jade-syntax-docs/) – meBe Jul 23 '20 at 06:48
ref: https://stackoverflow.com/questions/10595593/how-to-include-a-css-file-in-jade-without-linking-it – meBe Jul 23 '20 at 06:51
thanks for answering, but I used 'link' tag and app.use(~~). and It works. 'include' didn't working for my case. i don't know – Suee97 Jul 23 '20 at 07:42
This will output the contents of the css file within the `head` of the HTML document without being wrapped in a `style` tag. The browser won't know what to do with it. – Sean Jul 23 '20 at 15:39

How to make jade loading the css file? (It doesn't work)

2 Answers2

suggestion