如何使用 angular 14 的客户 webpack 和 url-loader

Question

我完全不知道应该如何设置。

简短的版本是：How do I use a load like url-loader with angular to url encode fonts in CSS?

我正在使用 primeicons，由于各种原因，它在我部署它的平台上并没有真正工作。最简单的解决方案是将字体直接嵌入到 css 中，这可以通过 url-loader 实现，并从那里搜索它们而不是作为文件。

我正在使用 https://www.npmjs.com/package/@angular-builders/custom-webpack 来尝试这个，但我无法让它工作。

我的 custom-webpack.config.ts 文件如下所示：

import * as webpack from 'webpack';
import {
  CustomWebpackBrowserSchema,
  TargetOptions,
} from '@angular-builders/custom-webpack';

export default (
  config: webpack.Configuration,
  options: CustomWebpackBrowserSchema,
  targetOptions: TargetOptions
) => {
  config.module.rules.push({
    test: /\.(woff|woff2|eot|ttf)$/,
    loader: 'url-loader',
    options: {
      limit: 100000,
    },
  });
  return config;
};

和我的angular.json

            "build": {
              "builder": "@angular-builders/custom-webpack:browser",
              "options": {
                "customWebpackConfig": {
                  "path": "./custom-webpack.config.ts"
                },

我正在导入 styles.scss 中的文件

@import 'primeflex/primeflex.scss';
@import 'primeicons/primeicons.css';
@import "primeng/resources/themes/tailwind-light/theme.css";
@import "primeng/resources/primeng.min.css";

导入工作正常，我得到的 css 包括导入的文件......但它仍在使用引用字体文件而不是 base64 编码，并在构建时将字体文件放入 dist 文件夹。

我正在尝试阅读 webpack 和 angular，但我不确定问题出在哪里。

不确定我还应该尝试什么。我怎样才能在 ng build?

的最终 style.css 输出中将字体嵌入为 base64