Проблема: я использую katex для отображения математики на странице. Затем я хочу создать PDF-версию части этой страницы, поэтому я создаю HTML-документ, содержащий экспортируемую часть, которая включает весь CSS-код и передает его в средство визуализации. Рендер не может получить доступ к ресурсам узла, поэтому все встроено. Работает отлично, кроме шрифтов.
Я пробовал как 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/.*'
})
]
};
@font-face
операторы, находится внутри модуля узла (katex). Я не ссылаюсь ни на один из этих шрифтов в моих собственных файлах CSS. Я ищу способ заменить URL-адреса на лету при запуске веб-пакета. Насколько я понимаю, мне придется изменить@font-face
утверждения в katex.css, если я хочу использовать ваше решение.