wordpress SASS compiles but background images don't display - laravel

Question

I am using Laravel mix and webpack.mix.js to compile css in wordpress. I've set up the source files and am able to compile without errors using npx mix watch etc in visual studios, creating the app.css and app.js files in the dist folder.
let mix = require('laravel-mix');
mix
.js('src/app.js', 'dist')
.sass('src/app.scss', 'dist');
However, when I tried to add an image in one of the pages via the respective scss file,
#hero {
height: 550px;
width: 100%;
background: url(/images/water.jpg) #f0f0f0;
}
the files compile and the css is the same in the compiled app.css file, but the image is not visible on the page or in the inspection bar.
I've tried every variation for the image path, including adding ../ or ./ in front, but most just give an error.
I've tried to override with option processCssUrls to the webpack.mix.js
let mix = require('laravel-mix');
mix.options({
processCssUrls: false
})
.js('src/app.js', 'dist')
.sass('src/app.scss', 'dist');
but this doesn't seem to do anything, although it's possible I added it wrong.
Strangely, the file also doesn't properly compile any of the custom colours that I make. I made a _colour.scss file in the source file with
$light: rgba(13, 59, 21, 0.6);
$dark: rgb(131, 56, 56);
and imported in the main scss file, but sometimes when I use it for links or backgrounds, it defaults to a different colour, even the !important tag doesn't help. The compiled css file also just shows different colours,
in the _header.scss file:
a {
display: block;
padding: .25rem 1rem;
color: $dark!important;
font-size: 1.1rem;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: $light!important;
}
and in the compiled app.css file:
header .top-menu li a {
display: block;
padding: 0.25rem 1rem;
color: #212529 !important;
font-size: 1.1rem;
text-decoration: none;
}
header .top-menu li a:hover {
text-decoration: underline;
color: #f8f9fa !important;
}
so perhaps something is going wrong in the compiling