CODEWITHSUNDEEP
cssnode.jsexpresssasspug
Nrgyzer
Nrgyzer

Reputation: 1075

Node.JS with Express and SASS - Compiled CSS file not applied

I'm new to NodeJS and I'm using Express to serve my pug files/view. Furthermore I'm using "express-sass-middleware" to compile and serve the scss/css files. Everything works very well but unfortunately, the CSS are not applied.

My app.js files looks like:

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', // the location of the entry point,
                                     // this can also be a directory

  precompile: true,                   // should it be compiled on server start
                                     // or deferred to the first request
                                     //  - defaults to false
}));

app.get('/', function (req, res) {
    res.render('index', {
        varTitle: 'Hello World'
    });
});

app.listen(3000, function() {
    console.log('Example app listening on port 3000!');
});

And my simple css file looks like:

// $icon-font-path: /3rdparty/fonts;

// @import 'bootstrap/bootstrap';
// @import './node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';

body
{
    background-color: green;
    font-size: 100px;
}

My index.pug file is:

doctype html
html(lang='en')
  head
    title= varTitle
    link(ref='stylesheet' type='text/css' href='/css/bootstrap.css')
  body
    h1= varTitle

Now, when I start my webserver using "node app.js", accessing http://localhost:3000, I see "Hello World" but unfortunately the body background isn't green and the text is also not 100px. That means that the css file is not applied. But when I access http://localhost:3000/css/bootstrap.css, I see the valid, css file.

Anyone know what I'm missing here? I'm a bit confused that I see the CSS source when accessing it directly but the browser doesn't apply the css styling. I already tried different browsers without any success. None of them applying the css file.

Upvotes: 0

Views: 1682

Answers (2)

Mukesh Sharma
Mukesh Sharma

Reputation: 9032

You have typing error in index.pug file for loading css file. You had mentioned ref whereas it should be rel.

link(rel='stylesheet' type='text/css' href='/css/bootstrap.css')

Happy to help you.

Upvotes: 1

stevenlacerda
stevenlacerda

Reputation: 1187

you don't seem to be serving the static files from your nodejs server code. You have to add your css dir in order to allow access from your html code:

app.use('/static', express.static('public'))

Now, you can load the files that are in the public directory from the /static path prefix.

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

Upvotes: 0

Related Questions