¿Cómo cargo font-awesome usando SCSS (SASS) en Webpack usando rutas relativas?

84

Tengo font-awesome en mi carpeta node_modules, así que trato de importarlo en mi archivo .scss principal así:

@import "../../node_modules/font-awesome/scss/font-awesome.scss";

Pero la compilación de paquetes de Webpack falla, diciéndome

Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot 

porque el archivo font-awesome.scss se refiere a una ruta relativa, '../fonts/'.

¿Cómo puedo decirle a scss \ webpack que @importe otro archivo y use la carpeta de ese archivo como carpeta de inicio para que sus rutas relativas funcionen como espera?

Ricardo
fuente
No sé webpack, pero ¿puedes poner el .eot ../../node_modules/font-awesome/fonts/fontawesome-webfont.eot?
BrTkCa
Podría hacerlo modificando el archivo de fuente impresionante, pero luego perdería los cambios cada vez que actualice npm, por lo que esa no es una opción.
Richard
webpack trabaja en conjunto express @Richard?
BrTkCa
No, no uso express
Richard
Estoy usando el npm para el cargador sass de font-awesome. usaste uno diferente?
Winnemucca

Respuestas:

139

Utilizar

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

donde la $fa-font-pathvariable se ve enfont-awesome/scss/_variables.scss

$fa-font-path: "../fonts" !default;

La tilde "~" es interpolada por sass-loader usando el mecanismo webpack .

usuario137794
fuente
11
No funciona para mí, se compila pero solo obtengo un rectángulo en mi sitio web ...: /
Donovan Charpin
1
Tuve que configurar el mío como $fa-font-path: "font-awesome/fonts", es decir, sin la tilde.
ctrlplusb
2
¿Podrías explicar con más precisión dónde editas qué? No entiendo esta respuesta
Richard
@Richard, ¿pudiste hacer que esto funcionara para ti? Además, marque esto como la respuesta.
Ascherer
No, usé mi respuesta a continuación en ese momento.
Richard
29

No parece haber ninguna forma de @importar archivos que tengan sus propias rutas relativas en SCSS \ SASS.

Entonces, en cambio, logré que esto funcionara:

  • Importe el archivo scss \ css font-awesome en mis archivos .js o .jsx, no en mis archivos de hoja de estilo:

    importar 'font-awesome / scss / font-awesome.scss';    
  • Agregue esto a mi archivo webpack.config:

    módulo:
    {
        cargadores:
        [
            {prueba: /\.js?$/, loader: 'babel-loader? cacheDirectory', exclude: / (node_modules | bower_components) /},
            {prueba: /\.jsx?$/, loader: 'babel-loader? cacheDirectory', exclude: / (node_modules | bower_components) /},
            {prueba: /\.scss?$/, loaders: ['style-loader', 'css-loader', 'sass-loader']},         
            {prueba: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader? mimetype = image / svg + xml'},
            {prueba: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader? mimetype = application / font-woff"},
            {prueba: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader? mimetype = application / font-woff"},
            {prueba: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader? mimetype = application / octet-stream"},
            {prueba: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
        ]
    }
Ricardo
fuente
¿Cómo maneja una ruta de fuente diferente? Me refiero a que importa el scss allí, pero no puede cambiar la ruta a sus archivos de fuentes, por ejemplo, si necesita cambiarlo para producción y las fuentes se encuentran en una carpeta diferente. ¿Algunas ideas? Eso es lo que tengo que hacer.
LordTribual
Todavía no tengo que modificar cosas para la producción. Me imagino que simplemente copiaría todo de mi compilación local y dejaría las rutas en paz. De lo contrario, puede mirar la sección de salida de webpack.config.js y ver si puede cambiar las rutas. O simplemente agregue un paso de compilación posterior en su sección de scripts package.json .
Richard
2
Lo tengo funcionando. Cambié la ruta del cargador y ahora está cargando las fuentes desde la ruta especificada.
LordTribual
No es necesario incluir el archivo scss de font-awesome en javascript. Aún puede incluirlo en su scss, siempre y cuando establezca la ruta de la fuente como sugiere el usuario137794, luego actualice el archivo webpack.config para tener en cuenta los tipos de fuente que sugiera.
Dave Lancea
¿Qué npm usaste? Estoy usando el cargador impresionante de fuentes sass y no tengo éxito.
Winnemucca
20

Lo siguiente funcionó para mí:

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

Esto es para importar las font-awesomefuentes & requeridas en el proyecto. Otro cambio está en las webpackconfiguraciones, para cargar las fuentes requeridas usando file-loader.

{
  test: /\.scss$/,
  loaders: ['style', 'css?sourceMap', 'sass'
  ],
}, {
  test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
  loader: 'file'
}
Yogesh Agrawal
fuente
12

Resuelto cambiando mi app.scss:

@import '~font-awesome/scss/_variables.scss';
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

Esta forma es útil para mantener las dependencias externas sin cambios ni versiones.

Wilk
fuente
2
Puede evitar la línea 1 y usar `! Default` al final de la línea 2.
Cerca
Es una pena que no pueda hacer que este método funcione porque significaría que no tendría que cambiar el _variables.scssarchivo cada vez que recompile el proyecto. No anula $fa-font-pathni ninguna otra variable para el caso ... así que no estoy seguro de cómo pudo hacerlo_
jesus g_force Harris
7

Acabo de establecer la ruta en mi archivo scss principal y funciona:

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';
ramon22
fuente
7

Así es como funcionó para mí, el truco es establecer $fa-font-pathla ruta de las fuentes de la siguiente manera.

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

Nota : Por favor revise su carpeta de fuentes node_modulesen mi caso es@fortawesome/fontawesome-free

Mahoma
fuente
1
@Muhammed En realidad, es un poco complicado cargar fuentes web como esta. Cuando compila sass en css, de acuerdo con su forma de compilación, es posible que sus fuentes no se compilen. Puede copiar la carpeta webfonts directamente a su carpeta pública / junto a su carpeta css. De esta manera, el código css impresionante de fuentes encontrará las fuentes y usted estará seguro.
Mycodingproject
6

Lo que funcionó para mí fue agregar resolve-url-loadery habilitarsourceMaps

Ya importé font-awesome en mi .scssarchivo raíz :

@import "~font-awesome/scss/font-awesome";
...

Este archivo raíz se importa en mi main.jsarchivo definido como punto de entrada de Webpack:

import './scss/main.scss';
...

Entonces mis reglas finales del módulo de paquete web se ven así:

 ...
 {
    test: /\.(sa|sc|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      { loader: 'postcss-loader', options: { sourceMap: true }, },
      'resolve-url-loader',
      { loader: 'sass-loader', options: { sourceMap: true }, },
    ],
  }, {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: { limit: 1000, name: 'fonts/[name].[ext]', },
  }
  ...

Nota:

Usé mini-css-extract-plugin, que se puede registrar así:

new MiniCssExtractPlugin({
    filename: 'css/main.css',
    chunkFilename: '[id].[hash]',
}),

url-loaderrequiere file-loaderser instalado, por lo que si obtiene un error como:, cannot find module file-loadersimplemente instálelo:

npm i -D file-loader

Enlaces útiles :

https://github.com/webpack/webpack/issues/2771#issuecomment-277514138 https://github.com/rails/webpacker/issues/384#issuecomment-301318904

Excelencia Ilesanmi
fuente
1

Para la versión 5.14, lo siguiente funcionó para mí:

$fa-font-path : '../node_modules/@fortawesome/fontawesome-free/webfonts';

@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";

@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";

@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
sdvlpr
fuente
0

v.4 (symofony 4 + paquete web)

$fa-font-path: "~components-font-awesome/webfonts";
@import '~components-font-awesome/scss/fa-brands';
@import '~components-font-awesome/scss/fa-regular';
@import '~components-font-awesome/scss/fa-solid';
@import '~components-font-awesome/scss/fontawesome';
Koudi
fuente