SCSS generates wrong url for background

Question

I have a project where I use the ReactTS template of DotNet. I installed SCSS and everything works, except for backgrounds.

The images and scss are compiled to dist folder (scss in the style.css file). All images are compiled correctly and can be called using normal css, but the problem is the scss, as the url() also contains dist in front of the actual url, while the css file itself is already in the dist folder. This means that the css looks for an image inside of /dist/dist/{image}.png} instead of /dist/{image}.png}.

Since I can't just directly edit the dist/style.css file, how can I make sure the path will be the correct one?

Edit: After changing the URL in the inspector, I can confirm that /dist/{image}.png} would indeed work. The problem is that inside of the css, it sais background-image: url('dist/{image}.png), where it should only be url('{image}.png. This is inside the css file that is generated in the dist folder.

Edit 2:

Uncompiled site.scss

html {
    background-image: url('../img/backgrounds/background1.jpg');
    background-size: cover;

    ...
}

Compiled style.css

html {
    background-image: url(dist/fc5316d2f76725be344cc36eb98c28f7.jpg);
    background-size: cover; 
}

Folder structure

├───ClientApp
│   ├───css
|   |   └───site.scss
|   └───img
|       └───background1.jpg
└───wwwroot
    └───dist
        ├───style.css
        └───fc5316d2f76725be344cc36eb98c28f7.jpg

Edit 3:

webpack.config.js

    ...

    output: {
        path: path.join(__dirname, bundleOutputDir),
        filename: '[name].js',
        publicPath: 'dist/'
    },
    module: {
        rules: [
            ...
            { test: /\.s?css$/, include: /ClientApp/, use: ExtractTextPlugin.extract({ use: ['css-loader', 'sass-loader'] }) },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader?limit=25000' }
        ]
    },
    plugins: [
        ...
        new ExtractTextPlugin({
            filename: 'style.css'
        })
    ]

    ...