Express path missing after refresh - node.js

Question

/styles.css goes missing after I do a page refresh.
Here's my package.json build script:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"clean": "rimraf dist",
"start": "nodemon -e js,css,handlebars -i scss --watch app --exec babel-node app/app.js",
"build": "npm run clean && mkdir -p dist && babel app -s -D -d dist",
"serve": "node dist/app.js",
"postinstall": "npm run build"
},
The problem only exists in the dist version.
I run npm run build, then npm run serve.
What this does is build and copy every file to /dist folder.
App is served in /dist/app.js.
So /styles.css loads on initial load, but subsequent loads shows request is cancelled. Tried loading the site with a private window but the problem persists. It loads only once again, after reloading the server.
screenshot of request
Here's app.js:
import bodyParser from 'body-parser'
import express from 'express'
import exphbs from 'express-handlebars'
import path from 'path'
import sassMiddleware from 'node-sass-middleware'
const PORT = process.env.PORT || 3000
const app = express()
// Config
app.locals.config = require('./config.json')
// Views and handlebars view engine
const hbs = exphbs.create({
defaultLayout: 'main',
layoutsDir: 'app/views/layouts',
helpers: {
sitename: function () {
return app.locals.config.sitename
},
ga: function () {
if (process.env.NODE_ENV === 'production') {
...
}
},
},
})
app.engine('handlebars', hbs.engine)
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'handlebars')
// Body parser
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: false}))
// Sass middleware
app.use(sassMiddleware({
src: path.join(__dirname, 'public/scss'),
dest: path.join(__dirname, 'public/css'),
outputStyle: 'compressed',
sourceMap: true,
}))
// Static folder
app.use(express.static(path.join(__dirname, 'public')))
// Routes
app.use(require('./routes/index.js'))
const server = app.listen(PORT, () => console.log(`listening at port ${PORT}...`))
I load /styles.css with this in my view template:
<link rel="stylesheet" href="/styles.css">
Update and solved:
I should had added that my folder structure looks like this:
/app
- public/
- css
- js
- scss
- routes/
- ...
- views/
- ...
Solved the problem by changing the the src path in views template:
<link rel="stylesheet" href="/css/styles.css">
Had to add prefix to node-sass-middleware too for local development.
// Sass middleware
app.use(sassMiddleware({
src: path.join(__dirname, 'public/scss'),
dest: path.join(__dirname, 'public/css'),
prefix: '/css',
outputStyle: 'compressed',
sourceMap: true,
}))