Wie kann ich Schriftarten in CSS mit Webpack einbinden?

Problemhintergrund: Ich verwende Katex, um etwas Mathematik auf einer Seite zu rendern. Ich möchte dann eine PDF-Version eines Teils dieser Seite erstellen, also erstelle ich ein HTML-Dokument, das den zu exportierenden Teil enthält, der das gesamte CSS enthält, und übergebe es an den Renderer. Der Renderer kann nicht auf die Knotenressourcen zugreifen, deshalb ist alles inline. Es funktioniert perfekt, bis auf die Schriftarten.

Ich habe sowohl den URL-Loader als auch den bas64-Inline-Loader ausprobiert, aber die generierten Schriftarten sind nicht inline. Ich habe das generierte CSS im Debugger überprüft, und die alten URLs sind noch vorhanden, keine Daten-URLs für die Schriftarten.

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

Am besten verwenden Sie postcss-cli und 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',
  }]
},

Erstellen Sie die Breite des Konfigurationsordners postcss.config.js

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

baseDir ist der Pfad zu den Schriftarten. In der scss-Datei füge ich eine Schriftart hinzu:

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

Als Ergebnis der Arbeit haben wir eine schön konvertierte Schriftart in base64 @font-face{font-family:Lato-Light;src:url("data:font/ttf;charset=utf-8;base64,...

UPDATE: Ich habe ein kleines Beispiel für postcss-inline-base64 vorbereitet