node.js - ¿Cómo cargo Font-Awesome usando SCSS(SASS) en Webpack usando rutas relativas?

npm install font awesome

Question

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

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

Pero la compilación de paquetes 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 se espera?

Answer 1

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

Answer 2

Consulte el sitio angular para obtener instrucciones Incluir Font Awesome

Answer 3

Lo que funcionó para mí fue agregar resolve-url-loader y habilitar sourceMaps

Ya .scss font-awesome en mi archivo raíz .scss :

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

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

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

Entonces las reglas finales de mi módulo webpack 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:

Utilicé mini-css-extract-plugin , que puede registrarse así:

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

url-loader requiere que se instale el url-loader file-loader , por lo que si obtiene un error como: cannot find module file-loader , simplemente instálelo:

npm i -D file-loader

Enlaces utiles :

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

Answer 4

Lo siguiente funcionó para mí:

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

Esto es para importar las font-awesome y requeridas en el proyecto. Otro cambio está en webpack configuraciones del webpack , 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''
}

Answer 5

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

Así que, en cambio, logré que this funcionara

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

  import ''font-awesome/scss/font-awesome.scss'';

• Agregue esto a mi archivo webpack.config:

module: { loaders: [ {test: //.js?$/, loader: ''babel-loader?cacheDirectory'', exclude: /(node_modules|bower_components)/ }, {test: //.jsx?$/, loader: ''babel-loader?cacheDirectory'', exclude: /(node_modules|bower_components)/ }, {test: //.scss?$/, loaders: [''style'', ''css'', ''sass'']}, {test: //.svg(/?v=/d+/./d+/./d+)?$/, loader: ''file-loader?mimetype=image/svg+xml''}, {test: //.woff(/?v=/d+/./d+/./d+)?$/, loader: "file-loader?mimetype=application/font-woff"}, {test: //.woff2(/?v=/d+/./d+/./d+)?$/, loader: "file-loader?mimetype=application/font-woff"}, {test: //.ttf(/?v=/d+/./d+/./d+)?$/, loader: "file-loader?mimetype=application/octet-stream"}, {test: //.eot(/?v=/d+/./d+/./d+)?$/, loader: "file-loader"}, ] }

Answer 6

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 y sin versión.

Answer 7

Utilizar

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

donde la variable $fa-font-path se ve en font-awesome/scss/_variables.scss

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

Como se describe aquí: http://fontawesome.io/get-started/

Answer 8

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