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/.*'
})
]
};
quelle
@font-face
Anweisungen enthält, in einem Knotenmodul (katex) befindet. Ich verweise auf keine dieser Schriftarten in meinen eigenen CSS-Dateien. Ich suche nach einer Möglichkeit, die URLs im laufenden Betrieb zu ersetzen, wenn das Webpack ausgeführt wird. So wie ich es verstehe, müsste ich die@font-face
Anweisungen in katex.css ändern, wenn ich Ihre Lösung verwenden möchte.