Come incorporare i caratteri nei CSS con il webpack?

Sfondo del problema: sto usando Katex per eseguire il rendering di alcuni matematici su una pagina. Voglio quindi creare una versione PDF di una parte di quella pagina, quindi creo un documento HTML che contenga la parte da esportare che contenga tutti i CSS e la passi al renderer. Il renderer non può accedere alle risorse del nodo, ecco perché tutto è inline. Funziona perfettamente, ad eccezione dei caratteri.

Ho provato sia url-loader che bas64-inline-loader, ma i caratteri generati non sono in linea. Ho esaminato il CSS generato nel debugger e i vecchi URL sono ancora presenti, nessun URL di dati per i caratteri.

Questo è il mio webpack.config.js attuale:

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/.*'
        })
    ]
};

Il modo migliore è usare postcss-cli e postcss-inline-base64

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

Creare la larghezza della cartella di configurazione postcss.config.js

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

baseDir è il percorso dei caratteri. Nel file scss aggiungo un font in questo modo:

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

Come risultato del lavoro abbiamo un font ben convertito in base64 @font-face{font-family:Lato-Light;src:url("data:font/ttf;charset=utf-8;base64,...

AGGIORNAMENTO: ho preparato un piccolo esempio postcss-inline-base64