Web paketiyle CSS'deki yazı tiplerini nasıl satır içine alabilirim?

Sorun arka plan: Bir sayfada matematik yapmak için katex kullanıyorum. Daha sonra o sayfanın bir kısmının PDF sürümünü oluşturmak istiyorum, bu yüzden tüm CSS'yi satır içine alan ve oluşturucuya ileten dışa aktarılacak parçayı içeren bir HTML belgesi oluşturuyorum. Oluşturucu düğüm kaynaklarına erişemiyor, bu yüzden her şey satır içi. Yazı tipleri dışında mükemmel çalışır.

Hem url-loader hem de bas64-inline-loader'ı denedim, ancak oluşturulan yazı tipleri satır içi değil. Hata ayıklayıcıda oluşturulan CSS'yi inceledim ve eski URL'ler hala var, yazı tipleri için veri URL'si yok.

Bu benim mevcut webpack.config.js:

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        "editor": './src/editor.js',
        "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js',
        "json.worker": 'monaco-editor/esm/vs/language/json/json.worker',
        "css.worker": 'monaco-editor/esm/vs/language/css/css.worker',
        "html.worker": 'monaco-editor/esm/vs/language/html/html.worker',
        "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker',
    },
    output: {
        globalObject: 'self',
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(woff|woff2|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: ['url-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: 'editor_text.html',
            template: 'src/editor_text.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'editor_markdown.html',
            template: 'src/editor_markdown.html',
            inlineSource: '/katex/.*'
        })
    ]
};

En iyi yol postcss-cli ve postcss-inline-base64 kullanmaktır

webpack:

{
  test: /\.(css|sass|scss)$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        importLoaders: 2,
        sourceMap: true
      },
    },
    {
      loader: 'postcss-loader', // important
      options: {
        sourceMap: true,
        config: {
          path: './config/',
        },
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
      },
    },
  ],
}, {
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  use: [{
    loader: 'file-loader',
  }]
},

Yapılandırma klasörü genişliği postcss.config.js oluşturun

module.exports = {
  plugins: {
    'postcss-inline-base64': {
      baseDir: './sources/'
    },
  },
};

baseDir yazı tiplerine giden yoldur. Scss dosyasında bu şekilde bir yazı tipi ekliyorum:

@font-face {
  font-family: 'Lato-Light';
  src: url('b64---../fonts/Lato-Light.ttf---') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Çalışmanın sonucunda base64'e güzelce dönüştürülmüş bir yazı tipimiz var. @font-face{font-family:Lato-Light;src:url("data:font/ttf;charset=utf-8;base64,...

GÜNCELLEME: Ben küçük bir örnek hazırlanan postcss-inline-base64