Comment installer Font Awesome dans Laravel Mix

Question

J'ai essayé d'installer la Police Impressionnant à l'aide de Laravel Mélange, mais lors de l'exécution d' run npm dev j'obtiens le message suivant:

ERREUR: Échec de la compilation avec 1 erreurs
erreur dans ./~/font-awesome/scss/font-awesome.scss Module de construire a échoué: /** ^ CSS Invalide après "...charger les styles": 1 prévu sélecteur ou à la règle, a été "var contenu = requise" dans /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss (ligne 1, colonne 1)

J'ai enlevé les commentaires dans le fichier et a essayé de changer la police des chemins, mais il ne résout pas le problème.

webpack.mix.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();

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

_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...

Answer 1

Pour installer la police-génial, vous devez d'abord l'installer avec la ngp. Donc, dans votre répertoire racine du projet type:

npm install font-awesome --save

(Bien sûr, je suppose que vous avez node.js et npm déjà installé. Et vous avez fait npm install dans vos projets répertoire racine)

Ensuite, éditez le resources/assets/sass/app.scss le 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 s'appuie unminified versions de ces ressources dans les dossiers appropriés. Si vous voulais rapetisser, on pourrait lancer à la place:

npm run production

Et puis vous pouvez utiliser la police de caractères.

Answer 2

Pour les polices Awesome 5 (Webfont with css) et Laravel mixin, ajoutez un package pour la police awesome 5

 npm i --save @fortawesome/fontawesome-free
 

Et importez une police géniale scss dans 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 incluez votre css compilé dans la mise en page

Answer 3

Pour Laravel 5.6 et la Police Impressionnant 5

Construire votre webpack.mix.js la configuration.

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Installer La Police Impressionnant.

npm install @fortawesome/fontawesome-free

Cette ligne doit être présent dans votre colis.json.

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

Dans /ressources/sass/app.scss d'importer un ou plusieurs styles.

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

Nous allons compiler l'ensemble de nos biens et de produire un prêt à la production de construire.

npm run production

Enfin, la référence de votre nouveau fichier CSS dans votre mise en page.

<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">

Answer 4

Ceci est destiné aux nouveaux utilisateurs qui utilisent Laravel 5.7 et Fontawesome 5.3

 npm install @fortawesome/fontawesome-free --save
 

et dans app.scss

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

Courir

 npm run watch
 

Utiliser dans la mise en page

 <link href="{{ asset('css/app.css') }}" rel="stylesheet">
 

Answer 5

Pour Laravel> = 5.5

• Run npm install font-awesome --save
• Ajouter @import "~font-awesome/scss/font-awesome.scss"; en resources/assets/saas/app.scss
• Run npm run dev (ou npm run watch ou même npm run production )