Webpack css-loader generate wrong image

Question

I paste svg to css loader across miniCssExtract and sass-loader(and offcourse i import it in main.js), and when i'm using url-function inside sass file i have generated 2 files(1 normal svg) and second with string "export default __webpack_public_path__ + "3a93a0304bac6c9d74a5f25388ed6773.svg";" that browser say can't read.

I waste for reaserch like 3 hours and i'm done, HELP ME!

webpack.config.js :

const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")


module.exports = {
    context: path.resolve(__dirname,"src",),
    mode: "development",
    entry: {
        main: "./main.js"
    },
    output: {
        filename: "[filename][contenthash].js",
        path: path.resolve(__dirname,"dist"),
        
    },
    
    
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            template:'index.html',
            inject:"body",
        }),
        new MiniCssExtractPlugin(),
    ],
    module: {
        rules: [

            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                type: 'asset/resource',
                use: {
                    loader: 'file-loader',
                  }
                  
            },
        

            {
                test: /\.s(a|c)ss$/i,
                use:[MiniCssExtractPlugin.loader,"css-loader","sass-loader"],
                
            }
        ]
            
    }

}

main.js :

import "./styles.sass"
import BG from "./assets/images/BG.svg"

styles.sass :

// GENERAL START

*
    margin: 0 0
    padding: 0 0
    user-select: none

html,body
    width: 100%
    height: 100%
    overflow: hidden
    box-sizing: border-box

// GENERAL END

// HEAD START
.header__
    background-image: url(./assets/images/BG.svg)


.head__head
    display: flex  

// HEAD END

Answer 1

It looks like the problem is with file-loader. There is an closed issue in css-loader regarding this problem https://github.com/webpack-contrib/css-loader/issues/1358

Try using https://webpack.js.org/guides/asset-modules/ instead.

In your case it should be enough to remove "file-loader".