reactjs - proyecto - ¿Cómo distribuir fuentes u otros activos estáticos con una biblioteca de componentes React creada con Webpack?

iniciar app en react

Question

Estoy tratando de incluir algunas fuentes con una biblioteca de componentes que distribuiré como un paquete de UMD generado con Webpack e instalado como un módulo de NPM; los componentes hacen uso de esas fuentes. El problema es que las URL que apuntan a las fuentes en el paquete generado son incorrectas y dan como resultado 404 cuando se ejecuta la aplicación que usa la biblioteca.

Por ejemplo, resolve-url-loader generará una URL de "/myfont.woff" . Pero, por supuesto, ese archivo no está realmente disponible en esa URL en la aplicación a menos que la aplicación que lo usa tenga alguna configuración para copiar ese archivo y servirlo en la ruta esperada.

¿Hay alguna manera de hacer que estas fuentes estén disponibles automáticamente (es decir, font-face: ''My Font'' funcionará) cuando una aplicación importa un componente de mi biblioteca, minimizando la cantidad de configuración necesaria en la aplicación que lo usa ?

Para archivos grandes, no quiero usar url-loader y Base 64-codificarlos y no puedo usar un CDN.

Answer 1

Creo que la manera más fácil es proporcionar un archivo .css donde sus activos están siendo utilizados a través de instrucciones de url(...) relativas url(...) . Entonces, tener algo así como

...
{
  test: //.css$/,
  use: [''style-loader'', ''css-loader''],
},
{
  test: //.(eot|svg|ttf|woff|woff2|png|jpg)$/,
  use: [''file-loader''],
},
...

en su webpack.config.js y su archivo webpack.config.js importado en su código, podrán usar los activos transfiriéndolos automáticamente a su directorio público de salida (las URL también deberían ajustarse automáticamente en el paquete resultante CSS).

Puede echar un vistazo, por ejemplo, a la biblioteca UI de Onsen , que ofrece incrustar sus activos y estilos a través de estos archivos:

import ''onsenui/css/onsenui.css'';
import ''onsenui/css/onsen-css-components.css'';

Aquí hay un ejemplo de cómo usan las fuentes a través de URL relativas allí:

@font-face {
  font-family: ''Material-Design-Iconic-Font'';
  src: url(''../fonts/Material-Design-Iconic-Font.woff2'') format(''woff2''), url(''../fonts/Material-Design-Iconic-Font.woff'') format(''woff''), url(''../fonts/Material-Design-Iconic-Font.ttf'') format(''truetype'');
  font-weight: normal;
  font-style: normal;
}

Answer 2

Necesita algunos cargadores para realizar esa tarea. para solucionar un problema de tamaño de archivo grande, uso cargadores de archivos.

      { test: //.eot(/?v=/d+./d+./d+)?$/, loader: ''file-loader?name=assests/fonts/[name].[ext]'' },
      { test: //.woff(2)?(/?v=[0-9]/.[0-9]/.[0-9])?$/, loader: ''file-loader?mimetype=application/font-woff&name=assests/fonts/[name].[ext]'' },
      { test: //.[ot]tf(/?v=/d+./d+./d+)?$/, loader: ''file-loader?mimetype=application/octet-stream&name=assests/fonts/[name].[ext]'' },
      { test: //.svg(/?v=/d+./d+./d+)?$/, loader: ''file-loader?mimetype=image/svg+xml&name=assests/fonts/[name].[ext]'' },
      { test: //.(jpe?g|png|gif|ico)$/i, loader: ''file-loader?name=assests/images/[name].[ext]'' },

finalmente use instrucciones de importación para importar los archivos css de las fuentes

import from ./assets/fonts/abc.css

pero asegúrese de tener configurada la carga de los cargadores webss css