Comment intégrer des polices en CSS avec webpack?

10

Contexte du problème: j'utilise katex pour effectuer des calculs sur une page. Je veux ensuite créer une version PDF d'une partie de cette page, donc je crée un document HTML contenant la partie à exporter qui insère tous les CSS et le passe au rendu. Le moteur de rendu ne peut pas accéder aux ressources du nœud, c'est pourquoi tout est en ligne. Cela fonctionne parfaitement, sauf pour les polices.

J'ai essayé à la fois le chargeur d'URL et le chargeur en ligne bas64, mais les polices générées ne sont pas intégrées. J'ai inspecté le CSS généré dans le débogueur, et les anciennes URL sont toujours présentes, pas d'URL de données pour les polices.

Voici mon webpack.config.js actuel:

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
la source

Réponses:

3

La meilleure façon est d'utiliser postcss-cli et 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',
  }]
},

Créer la largeur du dossier de configuration postcss.config.js

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

baseDir est le chemin d'accès aux polices. Dans le fichier scss j'ajoute une police de cette façon:

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

À la suite du travail, nous avons une police bien convertie en base64 @font-face{font-family:Lato-Light;src:url("data:font/ttf;charset=utf-8;base64,...

MISE À JOUR: J'ai préparé un petit exemple postcss-inline-base64

Grzegorz T.
la source
Merci beaucoup. Mon problème est que le fichier katex.css qui inclut les @font-faceinstructions se trouve à l'intérieur d'un module de noeud (katex). Je ne référence aucune de ces polices dans mes propres fichiers css. Je cherche un moyen de remplacer les URL à la volée lors de l'exécution du webpack. Si je comprends bien, je devrais changer les @font-faceinstructions dans katex.css si je veux utiliser votre solution.
Axel
Oui, vous ne pouvez pas vraiment essayer un autre plugin postcss-base64 Je n'ai pas utilisé celui-ci mais à partir de ce que j'ai lu dans la documentation, vous pouvez choisir l'extension afin qu'elle fonctionne. Vous n'aurez alors pas à modifier les fichiers. Je vais tester si je trouve un instant.
Grzegorz T.
Le plugin ok que j'ai suggéré ne fonctionne pas comme je le voulais, mais celui-ci vous n'aurez rien à changer dans les fichiers, toutes les polices seront automatiquement changées en postcss-font-base64 -> exemple de
Grzegorz T.