React & Next.js - Added a SCSS parser and tried adding CSS to webpack module config, but it doesn't live-reload, why?

In my package.json I've changed a few things:

  "scripts": {
    "build-css": "node-sass-chokidar ./static/style.scss ./static/style.css",
    "watch-css": "npm run build-css && node-sass-chokidar ./static/style.scss ./static/style.css --watch --recursive",
    "dev": "npm-run-all -p watch-css next",
    "next": "next",
    "build": "next build",
    "start": "next start"
  },

Because I much prefer a single SASS file containing all styles, until a solution is found to make a require('./style.scss'); work server-side and client-side.

The stylesheet is parsed and output as a single CSS-file while developing, just fine. I just need to reload the entire page to see my changes. That's a little bit of a drag, of course.

So I created a next.config.js file and added this:

const path = require('path');
const glob = require('glob');

const node_modules_dir = path.resolve(__dirname, 'node_modules');

module.exports = {
    webpack: (config, { dev }) => {

        config.module.rules.push(
            {
                test: /\.(css|scss)/,
                exclude: [node_modules_dir],
                loaders: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            }
        );
        return config
    }
};

And next.js is running in my terminal just fine, and the SCSS-file is parsed into a CSS-file just fine, too. Just, no client-side live-reload. I was expecting adding this to the config file would be sufficient to live-reload a CSS-file.

In my components/Page I've added this line:

<Head>
  <title>{title}</title>
  <link rel="stylesheet" type="text/css" href="/static/style.css" />
</Head>

But I'm not too familiar with hot-reload/live-reload inner workings.

What am I doing wrong?