Wie kann ich Schriftarten in CSS mit Webpack einbinden?

10

Problemhintergrund: Ich verwende Katex, um etwas Mathematik auf einer Seite zu rendern. Ich möchte dann eine PDF-Version eines Teils dieser Seite erstellen, also erstelle ich ein HTML-Dokument, das den zu exportierenden Teil enthält, der das gesamte CSS enthält, und übergebe es an den Renderer. Der Renderer kann nicht auf die Knotenressourcen zugreifen, deshalb ist alles inline. Es funktioniert perfekt, bis auf die Schriftarten.

Ich habe sowohl den URL-Loader als auch den bas64-Inline-Loader ausprobiert, aber die generierten Schriftarten sind nicht inline. Ich habe das generierte CSS im Debugger überprüft, und die alten URLs sind noch vorhanden, keine Daten-URLs für die Schriftarten.

Dies ist meine aktuelle 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/.*'
        })
    ]
};
Axel
quelle

Antworten:

3

Am besten verwenden Sie postcss-cli und 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',
  }]
},

Erstellen Sie die Breite des Konfigurationsordners postcss.config.js

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

baseDir ist der Pfad zu den Schriftarten. In der scss-Datei füge ich eine Schriftart hinzu:

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

Als Ergebnis der Arbeit haben wir eine schön konvertierte Schriftart in base64 @font-face{font-family:Lato-Light;src:url("data:font/ttf;charset=utf-8;base64,...

UPDATE: Ich habe ein kleines Beispiel für postcss-inline-base64 vorbereitet

Grzegorz T.
quelle
Vielen Dank. Mein Problem ist, dass sich die Datei katex.css, die die @font-faceAnweisungen enthält, in einem Knotenmodul (katex) befindet. Ich verweise auf keine dieser Schriftarten in meinen eigenen CSS-Dateien. Ich suche nach einer Möglichkeit, die URLs im laufenden Betrieb zu ersetzen, wenn das Webpack ausgeführt wird. So wie ich es verstehe, müsste ich die @font-faceAnweisungen in katex.css ändern, wenn ich Ihre Lösung verwenden möchte.
Axel
Ja, Sie können kein anderes Plugin postcss-base64 ausprobieren. Ich habe dieses Plugin nicht verwendet, aber aus dem, was ich in der Dokumentation gelesen habe, können Sie die Erweiterung auswählen, damit sie funktioniert. Dann müssen Sie die Dateien nicht mehr ändern. Ich werde testen, ob ich einen Moment Zeit finde.
Grzegorz T.
Ok Plugin, das ich vorgeschlagen habe, funktioniert nicht wie ich wollte, aber dieses müssen Sie nichts in den Dateien ändern, alle Schriftarten werden automatisch in postcss-font-base64 geändert -> Update- Beispiel
Grzegorz T.