Pego svg en css loader a través de miniCssExtract y sass-loader (y, por supuesto, lo importo en main.js), y cuando estoy usando la función url dentro del archivo sass, he generado 2 archivos (1 svg normal) y segundo con cadena "export default __webpack_public_path__ + "3a93a0304bac6c9d74a5f25388ed6773.svg";" ese navegador dice que no puede leer.

Pierdo para investigar como 3 horas y termino, ¡AYUDENME!

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"], } ] } }

principal.js:

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

estilos.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