NextJS and Storybook not rendering images and global styles - reactjs

Question

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;
}