web-dev-qa-db-fra.com

Comment charger font-awesome avec SCSS (SASS) dans Webpack avec des chemins relatifs?

Font-awesome dans mon dossier node_modules, je tente donc de l'importer dans mon fichier .scss principal, comme suit:

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

Mais la compilation Webpack bundling échoue, me disant

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

parce que le fichier font-awesome.scss fait référence à un chemin relatif, '../fonts/'.

Comment puis-je indiquer à scss\webpack de @ importer un autre fichier et d'utiliser le dossier de ce fichier comme dossier de départ pour que ses chemins relatifs fonctionnent comme prévu?

node.jssassnpmfont-awesomewebpack
55
Richard

Il ne semble pas y avoir de moyen pour les fichiers @import ayant leurs propres chemins relatifs dans SCSS\SASS.

Alors au lieu de cela, j'ai réussi à obtenir this to work:

  • Importez le fichier font-awesome scss\css dans mes fichiers .js ou .jsx, not mes fichiers de feuilles de style:

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

  • Ajoutez ceci à mon fichier webpack.config:

 module:
 {
 chargeurs: 
 [
 {test: /\.js?$/, loader: 'babel-loader? cacheDirectory', exclure:/(modules_noeud | composants_bower_bower) /}, 
 {test: /\.jsx?$/, loader: 'babel-loader? cacheDirectory', exclure:/(modules_noeud | composants_bower_bower) /}, 
 {test: /\.scss?$/, chargeurs: ['style', 'css', 'sass']}, 
 {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, chargeur: 'chargeur de fichiers? mimetype = image/svg + xml'}, 
 {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "chargeur de fichiers? mimetype = application/font-woff"}, 
 {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "chargeur de fichiers? mimetype = application/font-woff"}, 
 {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "chargeur de fichiers? mimetype = application/octet-stream"}, 
 {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "chargeur de fichiers"}, 
 ] 
 }
23
Richard

Utilisation

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

où la variable $fa-font-path est vue dans font-awesome/scss/_variables.scss

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

Comme décrit ci-dessus: http://fontawesome.io/get-started/

109
user137794

La suite a fonctionné pour moi:

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

Ceci permet d'importer les polices font-awesome et requises dans le projet . L'autre modification concerne les configurations webpack, afin de charger les polices requises à l'aide de file-loader.

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

Résolu en changeant mon app.scss:

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

Cette méthode est utile pour conserver les dépendances externes inchangées et non versionnées.

11
Wilk

Je viens de définir le chemin dans mon fichier scss principal et cela fonctionne:

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

Ce qui a fonctionné pour moi a été d'ajouter resolve-url-loader et d'activer sourceMaps

J'ai déjà importé font-awesome dans mon fichier racine .scss:

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

Ce fichier racine est importé dans mon fichier main.js défini comme point d'entrée de Webpack:

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

Ensuite, les règles finales de mon module webpack ressemblent à ceci:

 ...
 {
    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]', },
  }
  ...

Remarque: 

J'ai utilisé mini-css-extract-plugin, qui peut être enregistré comme ceci:

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

url-loader nécessite que file-loader soit installé, donc si vous obtenez une erreur telle que: cannot find module file-loader, installez-la simplement: 

npm i -D file-loader

Liens utiles:

https://github.com/webpack/webpack/issues/2771#issuecomment-277514138https://github.com/Rails/webpacker/issues/384#issuecomment-30131818904

1
Excellence Ilesanmi

Voir le site angulaire pour les instructions Inclure la police de caractères Awesome

0
Vitaliy Markitanov

v.4 (symofony 4 + webpack)

$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';
0
Koudi