webpack으로 CSS의 글꼴을 인라인하는 방법은 무엇입니까?

문제 배경 : katex를 사용하여 페이지에 수학을 렌더링하고 있습니다. 그런 다음 해당 페이지의 일부 버전의 PDF 버전을 만들고 싶습니다. 따라서 모든 CSS를 인라인하여 렌더러에 전달하는 내보낼 부분이 포함 된 HTML 문서를 만듭니다. 렌더러는 노드 리소스에 액세스 할 수 없으므로 모든 것이 인라인됩니다. 글꼴을 제외하고는 완벽하게 작동합니다.

url-loader와 bas64-inline-loader를 모두 시도했지만 생성 된 글꼴이 인라인되지 않았습니다. 디버거에서 생성 된 CSS를 검사했지만 이전 URL은 여전히 ​​글꼴에 대한 데이터 URL이 없습니다.

이것은 내 현재 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/.*'
        })
    ]
};

가장 좋은 방법은 postcss-cli 및 postcss-inline-base64를 사용하는 것입니다

웹팩 :

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

구성 폴더 너비 postcss.config.js 작성

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

baseDir은 글꼴의 경로입니다. scss 파일에서 다음과 같은 방식으로 글꼴을 추가합니다.

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

작업의 결과로 글꼴을 base64로 멋지게 변환했습니다. @font-face{font-family:Lato-Light;src:url("data:font/ttf;charset=utf-8;base64,...

업데이트 : 작은 예제 postcss-inline-base64를 준비했습니다.