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

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?

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 .

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"},
        ]
    }

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'
}

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.

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';

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

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

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";

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';