พื้นหลังของปัญหา: ฉันใช้ katex เพื่อแสดงผลทางคณิตศาสตร์บางอย่างบนหน้าเว็บ จากนั้นฉันต้องการสร้างส่วน PDF ของหน้านั้นดังนั้นฉันจึงสร้างเอกสาร HTML ที่มีส่วนที่จะส่งออกที่อินไลน์ CSS ทั้งหมดและส่งต่อไปยัง renderer ตัวแสดงภาพไม่สามารถเข้าถึงทรัพยากรของโหนดได้นั่นคือสาเหตุที่ทุกอย่างถูกแทรกไว้ มันทำงานได้อย่างสมบูรณ์แบบยกเว้นแบบอักษร
ฉันลองทั้ง url-loader และ bas64-inline-loader แต่ฟอนต์ที่สร้างขึ้นไม่ได้ถูกแทรก ฉันตรวจสอบ CSS ที่สร้างขึ้นในดีบักเกอร์และ URL เก่ายังอยู่ในนั้นไม่มี data-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 ได้ทันทีเมื่อ webpack ทำงาน ตามที่ฉันเข้าใจฉันจะต้องเปลี่ยน@font-face
ข้อความเป็น katex.css หากฉันต้องการใช้โซลูชันของคุณ