Webpack css-loader生成错误的图像

Question

我在miniCssExtract和sass - loader中粘贴svg到css loader(当然，我把它导入到main.js中)，当我在sass文件中使用url函数时，我已经生成了两个文件(一个普通的svg)，第二个是字符串"export default __webpack_public_path__ + "3a93a0304bac6c9d74a5f25388ed6773.svg";"，浏览器说它不能读。

我浪费了3个小时的研究，我完成了，帮帮我！

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

看起来问题出在文件加载器上。css-loader中有一个关于此问题的已解决问题https://github.com/webpack-contrib/css-loader/issues/1358

请尝试使用https://webpack.js.org/guides/asset-modules/。

在你的例子中，删除"file-loader“就足够了。