Recently, I've delved into utilizing NodeJS with Express to serve my pug files. In addition, I decided to incorporate the "express-sass-middleware" to compile and serve the scss/css files in my project. While everything seems to be functioning as expected, I encountered an issue where the CSS styles are not being applied.
The content of my app.js file is as follows:
var express = require('express');
var sassMiddleware = require('express-sass-middleware');
var app = express();
app.set('view engine', 'pug');
app.get('/css/bootstrap.css', sassMiddleware({
file: 'css/bootstrap.scss',
precompile: true,
}));
app.get('/', function (req, res) {
res.render('index', {
varTitle: 'Hello World'
});
});
app.listen(3000, function() {
console.log('Example app listening on port 3000!');
});
Here is a snippet of my simple css file:
// $icon-font-path: /3rdparty/fonts;
// @import 'bootstrap/bootstrap';
// @import './node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
body
{
background-color: green;
font-size: 100px;
}
As for my index.pug file:
doctype html
html(lang='en')
head
title= varTitle
link(ref='stylesheet' type='text/css' href='/css/bootstrap.css')
body
h1= varTitle
Upon starting the web server using "node app.js" and accessing http://localhost:3000, I can see "Hello World" displayed but unfortunately, the body background remains unchanged and the text size is not rendered as 100px. This suggests that the css file is not being properly applied. Strangely, when directly accessing http://localhost:3000/css/bootstrap.css, the correct css file is displayed.
I'm at a loss as to why the browser isn't applying the css styling despite being able to view the css source directly. I have even tried different browsers without success. None of them seem to apply the css file, leaving me puzzled. If anyone has any insights on what I might be overlooking here, your assistance would be greatly appreciated.