I'm using VueJS and within my scoped SCSS I have a background image pointing to an SVG file and that works fine... but when I try to use a loader like file-loader/url-loader/svg-url-loader to configure the ouput, it is being chunked and unable to be read. I have no idea what could be causing the conflict.

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

};

the chunked output is something like: module.exports = "data:image/svg+xml,blahblahblah"