NextJS and Storybook not rendering images and global styles

what is the best way to load global styles and images for Storybook in NextJS?

Below are the following Storybook files (config.js and scs-loader.scss and webpack.config.js)

webpack.config.js

module.exports = ({ config }) => {
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        loader: require.resolve('babel-loader'),
        options: {
            presets: [require.resolve('babel-preset-react-app')],
        },
    });

    config.resolve.extensions.push('.ts', '.tsx');

    config.module.rules.push({
        test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/,
        loader: require.resolve('file-loader')
    });
    return config;
};

config.js

import '!file-loader!style-loader!css-loader!sass-loader!./scss-loader.scss';
import { configure } from '@storybook/react';
configure(require.context('../components', true, /\.stories\.(j|t)sx?$/), module);

scss.loader.scss

@import '../styles/global.scss';

Using the above config I can get a successful Storybook build however I do not see any global styles nor do I see any images referenced in global.scss

If i remove the file-loader in config.js as follows

import '!style-loader!css-loader!sass-loader!./scss-loader.scss';
import { configure } from '@storybook/react';
configure(require.context('../components', true, /\.stories\.(j|t)sx?$/), module);

I see this error.

Error: Can't resolve '/images/hero.jpg' in 'D:\dev\personal\nextjs-ts\.storybook'

If I then go and remove all the images from global.scss I can then load Storybook and I can see the global styles however I've lost all the images. I need to try and get images and global styles working in tandem. Thanks.

Here is an example of how the images are referenced in global.scss.

.hero {
    width: 100%;
    height: 800px;
    background: url('/images/hero.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}