I'm in the early stages of setting up a Node.js/Express application (an area where I'm rather green) and I'm trying to integrate SASS for handling styling. I'm using the node-sass-middleware package and am able to get the SASS to render to CSS and display but only once after I restart the server. All subsequent requests are not serving the correct CSS. The .css file is there on subsequent requests but it is empty. Anyway, here's what I've got in my server.js file:
const express = require('express');
const app = express();
const sassMiddleware = require('node-sass-middleware');
const path = require('path')
app.set('views', __dirname + '/views');
app.use(sassMiddleware({
src: path.join(__dirname, "/sass"),
dest: path.join(__dirname, "/public/stylesheets"),
debug: true,
outputStyle: 'compressed'
}),
express.static(path.join(__dirname, 'public'))
);
And a basic static index page I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SkyCast</title>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
When I look in the compiled style.css file on the server the proper css is sitting there but it's not being picked up by the client. This is being run locally using Nodemon. Any help is greatly appreciated.
And after beating my head against this I found an answer. It seems that the call to express.static is only properly working if it's included in the original call to app.use. Setting it up like so:
app.use(sassMiddleware({
src: path.join(__dirname, 'scss'),
dest: path.join(__dirname, 'public'),
debug: true,
outputStyle: 'compressed'
}), express.static(path.join(__dirname, 'public')));
did the trick.