从11升级到Angular 13后，LESS文件中使用的图片没有加载到dist文件夹

Question

我正在使用 angular-builders/custom-webpack，我使用自定义 webpack 将 LESS 编译为 CSS。 在 Angular 11 中，将 LESS 文件中引用的图像移动到 dist 文件夹时没有问题。 但是，升级到 Angular 13 后，不再发生这种情况，并且背景图像的 URL 路径未设置为图像在我本地的位置。

这是我的自定义 webpack 文件

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')
        }
    },
};

这是我的 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"
    }
  }
}

在我的 styles.css 在 Angular 11

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

Angular 13 中的相同 CSS

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

Angular 13 中的 dist 文件夹

Angular 11 中的 dist 文件夹

帮助！！ 这个问题让我发疯