Làm thế nào để phông chữ nội tuyến trong CSS với webpack?

Vấn đề cơ bản: Tôi đang sử dụng katex để hiển thị một số phép toán trên một trang. Sau đó, tôi muốn tạo một phiên bản PDF của một phần của trang đó, vì vậy tôi tạo một tài liệu HTML có chứa phần được xuất để nội tuyến tất cả CSS và chuyển nó đến trình kết xuất. Trình kết xuất không thể truy cập tài nguyên nút, đó là lý do tại sao mọi thứ được nội tuyến. Nó hoạt động hoàn hảo, ngoại trừ các phông chữ.

Tôi đã thử cả trình tải url và trình tải cơ sở bas64, nhưng các phông chữ được tạo không được nội tuyến. Tôi đã kiểm tra CSS được tạo trong trình gỡ lỗi và các URL cũ vẫn còn, không có URL dữ liệu cho các phông chữ.

Đây là webpack.config.js hiện tại của tôi:

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

Cách tốt nhất là sử dụng postcss-cli và postcss-inline-base64

gói web:

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

Tạo thư mục cấu hình chiều rộng postcss.config.js

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

baseDir là đường dẫn đến các phông chữ. Trong tệp scss tôi thêm một phông chữ theo cách này:

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

Kết quả của công việc là chúng tôi có một phông chữ được chuyển đổi độc đáo thành base64 @font-face{font-family:Lato-Light;src:url("data:font/ttf;charset=utf-8;base64,...

CẬP NHẬT: Tôi đã chuẩn bị một ví dụ nhỏ postcss-inline-base64