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.
via Jonathon Nordquist
No comments:
Post a Comment