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

J’ai un fichier font-awesome dans mon dossier node_modules, donc j’essaie de l’importer dans mon fichier .scss principal comme ceci:

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

Mais la compilation des packs Webpack échoue, me disant

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

car le fichier font-awesome.scss fait référence à un chemin relatif, “../fonts/”.

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

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/

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

Au lieu de cela, j’ai réussi à faire fonctionner ceci :

  • Importez le fichier scss \ css font-awesome dans mes fichiers .js ou .jsx, pas dans 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: / (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"},
         ]
     }

Après a travaillé pour moi:

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

Ceci permet d’importer les font-awesome & required dans le projet. Une autre modification webpack configurations webpack , pour charger les fonts requirejses à l’aide de file-loader .

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

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 manière est utile pour garder les dépendances externes inchangées et non versées.

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

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

Ce qui a fonctionné pour moi a été d’append sourceMaps resolve-url-loader et d’activer les 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'; ... 

Alors les règles finales du 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 comme: cannot find module file-loader , installez-le simplement:

 npm i -D file-loader 

Liens utiles :

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