Comment installer font-awesome dans laravel mix

j'ai essayé d'installer Font Awesome en utilisant Laravel Mix mais lors de l'exécution run npm dev afficher ce message:

ERROR  Failed to compile with 1 errors                                                                                                   

 error  in ./~/font-awesome/scss/font-awesome.scss

Module build failed: 
/**
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss (line 1, column 1)

j'ai supprimer ce commentaires dans le fichier et essayé de changer la police des chemins de trop, mais pas résolus de toute façon

mon webpack.mélange.js:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .copy('node_modules/font-awesome/fonts/', 'public/fonts')
   .sass('node_modules/font-awesome/scss/font-awesome.scss', 'public/css')
   .version();

C'est mon fontawesome.scss:

@import "variables";
@import "mixins";
@import "path";
@import "core";
@import "larger";
@import "fixed-width";
@import "list";
@import "bordered-pulled";
@import "animated";
@import "rotated-flipped";
@import "stacked";
@import "icons";
@import "screen-reader";

C'est mon _variable.scss:

// Variables
// --------------------------

$fa-font-path:        "../fonts" !default;
$fa-font-size-base:   14px !default;
$fa-line-height-base: 1 !default;
// $fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts" !default; // for referencing Bootstrap CDN font files directly
$fa-css-prefix:       fa !default;
$fa-version:          "4.7.0" !default;
$fa-border-color:     #eee !default;
$fa-inverse:          #fff !default;
$fa-li-width:         (30em / 14) !default;
// Continue...
22
demandé sur Lucas Lopes 2017-04-17 15:28:50

9 réponses

pour installer font-awesome vous devez d'abord l'installer avec npm. Ainsi, dans le répertoire racine de votre projet, tapez:

npm install font-awesome --save

(bien sûr je suppose que vous avez le noeud.js et npm sont déjà installés. Et vous avez fait npm install dans vos projets répertoire racine)

puis éditez le resources/assets/sass/app.scss fichier et l'ajouter en haut de cette ligne:

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

Maintenant vous pouvez le faire par exemple:

npm run dev

cela construit des versions non réduites des ressources dans le correct dossier. Si vous vouliez les miniifier, vous feriez mieux de lancer:

npm run production

et ensuite vous pouvez utiliser la police.

59
répondu Kornel 2018-02-11 17:13:30

Police Impressionnant 5(webfont avec css). et Laravel mixin ajouter un package pour la police impressionnant 5

npm i --save @fortawesome/fontawesome-free

et importer police génial scss app.scss ou votre fichier SCSS personnalisé

@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

compilez vos actifs npm run dev ou npm run production et inclure votre compilé css dans la mise en page

22
répondu Karan 2018-08-05 16:48:40

Pour Laravel > = 5,5

  • Exécuter npm install font-awesome --save
  • Ajouter @import "~font-awesome/scss/font-awesome.scss";resources/assets/saas/app.scss
  • Exécuter npm run dev (ou npm run watch ou encore npm run production)
14
répondu rap-2-h 2017-11-06 17:12:45

pour Laravel 5.6 et Font Awesome 5

cours...

npm i @fortawesome/fontawesome-free

Cela devrait maintenant être dans votre forfait.json...

// Font Awesome
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.3.1",

Dans /resources/assets/js/bootstrap.js ajoute cette ligne...

require('@fortawesome/fontawesome-free');

Dans /resources/assets/sass/app.scss ajouter cette ligne...

@import "~@fortawesome/fontawesome-free/css/all.css";

Dans /resources/assets/sass/_variables.scss ajouter cette ligne...

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

à Partir de la ligne de commande exécuter...

npm run production
8
répondu Karl Hill 2018-09-21 19:39:32

j'ai récemment écrit un blog à ce sujet pour le Laravel5.6. Lien vers le blog est https://www.samundra.com.np/integrating-font-awesome-with-laravel-5.x-using-webpack/1574

Les étapes sont semblables à la description ci-dessus. Mais dans mon cas, j'ai dû faire des étapes supplémentaires comme configurer le chemin webfonts à font-awesome dans le répertoire "public". Définir la racine de la ressource dans Laravel mix etc. Vous pouvez trouver les détails dans le blog.

je laisse le lien ici, donc il aide les personnes pour qui les solutions mentionnées ne fonctionnent pas.

4
répondu Samundra 2018-09-29 11:49:33

J'utilise Laravel 5.5.14 et aucun de ces éléments n'a fonctionné pour moi. Donc voici les étapes que j'ai faites pour que ça marche.

1.Installer la police-génial en utilisant des mnp:

   npm install font-awesome --save

2.Déplacez les polices de votre répertoire public en ajoutant cette ligne dans votre webpack.mixin.js

mix.copyDirectory('node_modules/font-awesome/fonts', 'public/fonts/font-awesome');

3.Ouvrez votre application.scss pour spécifier le chemin des polices dans vos node_modules et quel chemin relatif utiliser pour la compilation:

$fa-font-path: "../fonts/font-awesome" !default;
@import "~font-awesome/scss/font-awesome.scss";
3
répondu Hyder B. 2018-01-05 14:47:08 
npm install font-awesome --save

ajouter ~/ avant le chemin d'accès 

@import "~/font-awesome/scss/font-awesome.scss";
2
répondu Vahid Alvandi 2018-07-05 15:42:47

essayez votre webpack.mélange.js pour ajouter le '*' 

.copy('node_modules/font-awesome/fonts/*', 'public/fonts')
-2
répondu Dimitri Mostrey 2017-04-17 13:09:02

Essayez celui-ci: 

.copyDirectory('node_modules/font-awesome/fonts', 'public/fonts')
-2
répondu Farzad Zarasvand 2017-08-29 08:27:30