Bagaimana cara inline font dalam CSS dengan webpack?


10

Latar belakang masalah: Saya menggunakan katex untuk membuat beberapa matematika pada halaman. Saya kemudian ingin membuat versi PDF dari bagian halaman itu, jadi saya membuat dokumen HTML yang berisi bagian yang akan diekspor yang menyatukan semua CSS dan meneruskannya ke renderer. Penyaji tidak dapat mengakses sumber daya simpul, itu sebabnya semuanya diuraikan. Ini berfungsi dengan baik, kecuali untuk font.

Saya mencoba baik url-loader dan bas64-inline-loader, tetapi font yang dihasilkan tidak inline. Saya memeriksa CSS yang dihasilkan di debugger, dan URL lama masih ada, tidak ada data-URL untuk font.

Ini webpack.config.js saya saat ini:

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/.*'
        })
    ]
};

Jawaban:


3

Cara terbaik adalah menggunakan postcss-cli dan postcss-inline-base64

paket web:

{
  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',
  }]
},

Buat config lebar folder postcss.config.js

module.exports = {
  plugins: {
    'postcss-inline-base64': {
      baseDir: './sources/'
    },
  },
};

baseDir adalah path ke font. Dalam file scss saya menambahkan font dengan cara ini:

@font-face {
  font-family: 'Lato-Light';
  src: url('b64---../fonts/Lato-Light.ttf---') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Sebagai hasil dari pekerjaan kami memiliki font yang dikonversi dengan baik ke base64 @font-face{font-family:Lato-Light;src:url("data:font/ttf;charset=utf-8;base64,...

UPDATE: Saya menyiapkan contoh kecil postcss-inline-base64


Terima kasih banyak. Masalah saya adalah bahwa file katex.css yang menyertakan @font-facepernyataan ada di dalam modul simpul (katex). Saya tidak mereferensikan font-font ini dalam file css saya sendiri. Saya mencari cara untuk mengganti URL on the fly saat webpack berjalan. Seperti yang saya mengerti, saya harus mengubah @font-facepernyataan di katex.css jika saya ingin menggunakan solusi Anda.
Axel

Ya, Anda tidak bisa mencoba plugin lain postcss-base64 Saya belum pernah menggunakan yang ini tetapi dari apa yang saya baca di dokumentasi Anda dapat memilih ekstensi sehingga harus bekerja. Maka Anda tidak perlu memodifikasi file. Saya akan menguji jika saya menemukan waktu sesaat.
Grzegorz T.

Ok plugin yang saya sarankan tidak berfungsi seperti yang saya inginkan, tetapi yang ini Anda tidak perlu mengubah apa pun dalam file, semua font secara otomatis akan diubah menjadi postcss-font-base64 -> perbarui contoh
Grzegorz T.
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.