Búsqueda de sitios web

node.js - Problema de ruta relativa @font-face en Webpack

Tengo un problema al cargar las fuentes usando una ruta relativa en una aplicación angular2.

En app.ts tengo estas dos importaciones

import '../../../public/css/fonts.less';
import '../../../public/css/main.less';

Dentro del archivo fonts.less tengo esta declaración @font-face:

@font-face {
    font-family: 'Montserrat';
    src: url('/public/fonts/Montserrat/Montserrat-Regular.eot'); /* IE9 Compat Modes */
    src: url('/public/fonts/Montserrat/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/public/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('/public/fonts/Montserrat/Montserrat-Regular.svg#Montserrat-Regular') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

Y esto funciona bien. Pero si intento cambiar la ruta a relativa, por ejemplo

url('../../fonts/Montserrat/Montserrat-Regular.eot');

Estoy recibiendo este error:

ERROR en ./~/css-loader!./~/less-loader!./public/css/fonts.less Módulo no encontrado: Error: No se puede resolver 'archivo' o 'directorio' ../fonts/Montserrat/Montserrat-Regular.eot en [...] @ ./~/css-loader!./~/less-loader!./public/css/fonts.less 6:85-138 ERROR en ./public/css/fonts.less Fallo en la compilación del módulo: ModuleNotFoundError: Módulo no encontrado: Error: No se puede resolver 'archivo' o 'directorio' ../fonts/Montserrat/Montserrat-Regular.eot en [...]

¿Alguien sabe cuál puede ser el problema?

P.D. Necesito usar rutas relativas por una razón.

Respuesta #1

No hay una razón particular para usar rutas relativas en webpack. Puedes usar alias de webpack para eliminar esta necesidad. Los alias usados correctamente pueden resolver muchos problemas, incluido este. Solo especifica un alias para tu directorio de CSS y fuentes:

resolve: {
  alias: {
    styles: path.resolve(__dirname, 'public/src'),
    fonts: path.resolve(__dirname, 'public/fonts')
  }
}

y luego, importa los módulos usando alias:

import '~styles/fonts.less';
import '~styles/main.less';

y en tu tipo de letra:

src: url('~fonts/Montserrat/Montserrat-Regular.eot');

Personalmente, tiendo a evitar el uso de rutas relativas en mis proyectos construidos con webpack. La razón es que es mucho más limpio y legible, y previene problemas que puedan surgir al mezclar rutas relativas en diferentes lugares que dependen entre sí. Como resultado, tienes un lugar central donde defines tus rutas y dejas que webpack resuelva las rutas relativas por ti.

Artículos relacionados