Webpack css-loader 生成错误的图像

Question

我通过 miniCssExtract 和 sass-loader 将 svg 粘贴到 css 加载器（当然我在 main.js 中导入它），当我在 sass 文件中使用 url 函数时，我生成了 2 个文件（1 个普通 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/。

在您的情况下，删除“文件加载器”就足够了。