Contexte du problème: j'utilise katex pour effectuer des calculs sur une page. Je veux ensuite créer une version PDF d'une partie de cette page, donc je crée un document HTML contenant la partie à exporter qui insère tous les CSS et le passe au rendu. Le moteur de rendu ne peut pas accéder aux ressources du nœud, c'est pourquoi tout est en ligne. Cela fonctionne parfaitement, sauf pour les polices.
J'ai essayé à la fois le chargeur d'URL et le chargeur en ligne bas64, mais les polices générées ne sont pas intégrées. J'ai inspecté le CSS généré dans le débogueur, et les anciennes URL sont toujours présentes, pas d'URL de données pour les polices.
Voici mon webpack.config.js actuel:
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
instructions se trouve à l'intérieur d'un module de noeud (katex). Je ne référence aucune de ces polices dans mes propres fichiers css. Je cherche un moyen de remplacer les URL à la volée lors de l'exécution du webpack. Si je comprends bien, je devrais changer les@font-face
instructions dans katex.css si je veux utiliser votre solution.