I'm getting used to Express and various other node-related frameworks as I find it interesting and more lightweight than the ASP MVC world.. and one of the first things I'm trying to do is get SASS files automagically compiling into CSS files.
I've gotten some ways into it and installed node-sass and followed a few tutorials but I'm not quite getting the result I want. First of all, here is my directory structure.
app.js
static/
stylesheets/
images/
js/
sass/
index.sass
views/
index.jade
So my plan is fairly simple: when I visit views/index.jade in the browser, I want index.jade to render static/stylesheets/index.css - obviously, this doesn't exist at compile time, but we have the corresponding index.scss file inside of sass.
My set up currently is that /css/index.css will refer to __dirname/static/stylesheets. So, inside of my jade view, I have the following block:
block head
link(href='/css/index.css', rel='stylesheet')
The intention is that this link will refer to the compiled sass file. Here's the portion of app.js concerning the compilaton of sass and serving of static content:
// Enable SASS compilation
app.use(sass.middleware({
src: __dirname + '/sass',
dest: __dirname + '/static/stylesheets',
debug: true,
outputStyle: 'compressed'
}));
// Add static content
app.use('/js', express.static(__dirname + '/static/js'));
app.use('/img', express.static(__dirname + '/static/img'));
app.use('/css', express.static(__dirname + '/static/stylesheets'));
My issue is that what's actually happening is that SASS appears to be compiling the css just fine, but it's prepending everything into a /css/ folder (which doesn't exist) because of the /css route I've used above. Maybe the debug output will make more sense:
source : E:\project\sass\css\index.scss
dest : E:\project\static\stylesheets\css\index.css
read : E:\project\static\stylesheets\css\index.css
Obviously, this is not intended, and ends up 404ing as the browser thinks we are requesting css/index.css but the SASS file is being compiled into, effectively, css/css/index.css.
What should I do here? I assume I am making a glaring mistake but I can't see it as I am new to node/express.
I fixed this by changing the extension of my sass file to scss. That was the only issue. |: slightly annoying given that the package is named node-sass.