¿Cómo incorporar fuentes en CSS con webpack?


10

Antecedentes del problema: estoy usando katex para representar algunas matemáticas en una página. Luego quiero crear una versión PDF de parte de esa página, así que creo un documento HTML que contiene la parte a exportar que alinea todo CSS y lo pasa al renderizador. El renderizador no puede acceder a los recursos del nodo, es por eso que todo está en línea. Funciona perfectamente, excepto por las fuentes.

Probé tanto url-loader como bas64-inline-loader, pero las fuentes generadas no están en línea. Inspeccioné el CSS generado en el depurador, y las URL antiguas todavía están en, no hay URL de datos para las fuentes.

Este es mi webpack.config.js actual:

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

Respuestas:


3

La mejor manera es usar postcss-cli y postcss-inline-base64

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

Crear ancho de carpeta de configuración postcss.config.js

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

baseDir es la ruta a las fuentes. En el archivo scss agrego una fuente de esta manera:

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

Como resultado del trabajo, tenemos una fuente bien convertida a base64 @font-face{font-family:Lato-Light;src:url("data:font/ttf;charset=utf-8;base64,...

ACTUALIZACIÓN: preparé un pequeño ejemplo postcss-inline-base64


Muchas gracias. Mi problema es que el archivo katex.css que incluye las @font-facedeclaraciones está dentro de un módulo de nodo (katex). No hago referencia a ninguna de estas fuentes en mis propios archivos css. Estoy buscando una manera de reemplazar las URL sobre la marcha cuando se ejecuta webpack. Según tengo entendido, tendría que cambiar las @font-facedeclaraciones en katex.css si quiero usar su solución.
Axel

Sí, no puedes probar otro plugin postcss-base64. No he usado este, pero de lo que he leído en la documentación puedes elegir la extensión para que funcione. Entonces no tendrá que modificar los archivos. Probaré si encuentro un momento de tiempo.
Grzegorz T.

Ok, el complemento que sugerí no funciona como quería, pero este no tendrá que cambiar nada en los archivos, todas las fuentes se cambiarán automáticamente a postcss-font-base64 -> ejemplo de
Grzegorz T.
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.