javascript - 如何使用 webpack 在 CSS 中内联字体?
问题描述
问题背景:我正在使用 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/.*'
})
]
};
解决方案
最好的方法是使用 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
推荐阅读
- java - 从 SQLite 迁移到 Room DB
- visual-c++ - 使用内联汇编交换数组中的 2 个整数会导致奇怪的内存值
- java - 委托自定义杰克逊反序列化器
- php - 我的导航菜单的 Css 代码在 Wordpress 主题中不起作用
- reactjs - 在 github 操作中运行时 mv 命令不起作用
- python - 水果袋交换问题:快速 python 算法在两个列表之间交换包装项目而不改变项目计数
- python - 如何使用 .iter_content 正确读取大块的 html?
- java - OpenGL(LWJGL 3)剔除不在视锥体中的地形顶点/三角形
- .net-core - 呈现为部分视图时下拉列表为空白
- javascript - 如何从JS中的日期字符串中提取日期