After upgrading to Angular 13 from 11, images used in LESS files are not loaded to the dist folder

I'm using angular-builders/custom-webpack where I handle compiling of LESS to CSS with the custom webpack. In Angular 11, it works no issue where the images that are referenced in the LESS files are moved to the dist folder. However, after upgrading to Angular 13, this no longer happens and the URL path of the background image is not set to where the image is in my local.

here is my custom webpack file

const path = require('path');
const SpritesmithPlugin = require('webpack-spritesmith');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const TIMESTAMP = Date.now();

module.exports = {
    entry: {
        courses: [path.resolve(__dirname, '../assets/less/courses.less')],
        styles: [path.resolve(__dirname, '../assets/less/styles.less')]
    },
    plugins: [
        new SpritesmithPlugin({
            src: {
                cwd: path.resolve(__dirname, '../assets/img/sprite_source'),
                glob: '*.{png,gif}'
            },
            target: {
                image: path.resolve(__dirname, '../assets/img/sprite.' + TIMESTAMP + '.png'),
                css: path.resolve(__dirname, '../assets/less/base/_sprite-source.less')
            },
            apiOptions: {
                cssImageRef: '../img/sprite.' + TIMESTAMP + '.png'
            }
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
        new CopyPlugin({
            patterns: [
              { from: path.resolve(__dirname, "../assets/js/lib/conditional/site.js"), to: path.resolve(__dirname, "../assets/dist/js") },
            ],
          }),
    ],
    module: {
        rules: [
            {
                test: /\.less$/,
                exclude: [
                    path.resolve(__dirname, 'src'),
                ],
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader',
                ],
            },
        ]
    },
    resolve: {
        modules: ["node_modules", "spritesmith-generated"],
        alias: {
            Assets: path.resolve(__dirname, '../assets')
        }
    },
};

Here is my angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "xpl": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "replaceDuplicatePlugins": false
            },
            "outputPath": "../assets/dist/ng-new",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/styles"
              ]
            },
            "assets": [
              "src/styles/svgs"
            ],
            "styles": [
              "src/styles.less",
              "./custom-bootstrap.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "none",
              "sourceMap": false,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "xpl:build",
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "replaceDuplicatePlugins": true
            }
          },
          "configurations": {
            "production": {
              "browserTarget": "xpl:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "xpl:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [],
            "styles": [
              "src/styles.less",
              "./custom-bootstrap.scss"
            ],
            "assets": []
          }
        }
      }
    },
    "xpl-e2e": {
      "root": "e2e",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "xpl:serve"
          }
        }
      }
    }
  },
  "defaultProject": "xpl",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "xpl",
      "style": "less"
    },
    "@schematics/angular:directive": {
      "prefix": "xpl"
    }
  }
}

in my styles.css in Angular 11

.icon-export-white {
  background-image: url(sprite.1660595463966.png);
  background-position: -83px -588px;
  width: 16px;
  height: 20px;
}

same CSS in Angular 13

.icon-export-white {
    background-image: url(file:///Users/bkoo/Documents/workspace/xplore/xplore-web/src/main/webapp/assets/img/sprite.1660598549301.png);
    background-position: -83px -588px;
    width: 16px;
    height: 20px
}

dist folder in Angular 13

dist folder in Angular 11

HELP!! this issue is driving me nuts