Estoy usando VueJS y dentro de mi SCSS con alcance tengo una imagen de fondo que apunta a un archivo SVG y funciona bien... pero cuando trato de usar un cargador como file-loader/url-loader/svg-url-loader para configure la salida, se está fragmentando y no se puede leer. No tengo ni idea de lo que podría estar causando el conflicto.

 const path = require('path'); const { VueLoaderPlugin } = require('vue-loader'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { mode: 'development', entry: { main: path.resolve(__dirname, 'src/index.ts'), }, output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name].js', publicPath: '/assets/', }, devServer: { host: '0.0.0.0', static: path.join(__dirname, 'dist'), compress: false, port: 7000, }, module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', options: { appendTsSuffixTo: [/\.vue$/], }, }, { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', }, { loader: 'sass-loader', }, ], }, { test: /\.svg$/, exclude: /node_modules/, use: { loader: 'svg-url-loader', }, }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: 'assets/css/[name].css', chunkFilename: '[id].css', }), new VueLoaderPlugin(), new HtmlWebpackPlugin({ template: path.join(__dirname, './src/index.html'), filename: path.join(__dirname, './dist/index.html'), minify: false, }), ], devtool: 'source-map', resolve: { extensions: ['.tsx', '.ts', '.js', '.vue'], }, };

la salida fragmentada es algo así como: module.exports = "data:image/svg+xml,blahblahblah"