web-dev-qa-db-fra.com

Comment intégrer des polices en CSS avec webpack?

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 rendu ne peut pas accéder aux ressources du noeud, c'est pourquoi tout est en ligne. Il fonctionne parfaitement, à l'exception des 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/.*'
        })
    ]
};
javascriptcsswebpackdata-uri
10
Axel

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

3
Grzegorz T.