如何将 fonts 内联到 CSS 和 webpack？

Question

问题背景：我正在使用 katex 在页面上呈现一些数学。 然后我想创建该页面的一部分的 PDF 版本，因此我创建了一个 HTML 文档，其中包含要导出的部分，内联所有 CSS 并将其传递给渲染器。 渲染器无法访问节点资源，这就是内联所有内容的原因。 它工作完美，除了 fonts。

我尝试了 url-loader 和 bas64-inline-loader，但是生成的 fonts 没有内联。 我在调试器中检查了生成的 CSS，旧的 URL 仍然存在，没有 fonts 的数据 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/.*'
        })
    ]
};

Answer 1

最好的方法是使用 postcss-cli 和 postcss-inline-base64

webpack：

{
  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 是 fonts 的路径。 在 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

Answer 2

有一个名为base64-inline-loader的 npm package，这似乎是解决我的问题的不错选择。

在我的vue项目中，大家可以参考我的配置。

一、添加package

yarn add -D base64-inline-loader

然后，处理“vue.config.js”

chainWebpack(config) {
  const fontsRule = config.module.rule('fonts')
  fontsRule.uses.clear()
  config.module
    .rule('fonts')
    .test(/\.(ttf|otf|eot|woff|woff2)$/)
    .use('base64-inline-loader')
    .loader('base64-inline-loader')
    .tap((options) => {
      // modify the options...
      return options
    })
    .end()
  }

经过测试和验证