web-dev-qa-db-fra.com

Comment installer Font Awesome dans Laravel Mix

J'ai essayé d'installer Font Awesome en utilisant Laravel Mix, mais lors de l'exécution de run npm dev, le message suivant s'affiche:

ERREUR Echec de la compilation avec 1 erreur
erreur dans ./~/font-awesome/scss/font-awesome.scss La construction du module a échoué:/** ^ CSS non valide après "... charger les styles": 1 sélecteur ou règle at attendu, était "var content = requi" dans /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss (ligne 1, colonne 1)

J'ai supprimé les commentaires du fichier et essayé de modifier le chemin des polices, mais cela n'a pas résolu 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...
phplaravellaravel-5webpacklaravel-mix
45
Lucas Lopes

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

npm install font-awesome --save

(Bien entendu, je suppose que node.js et npm sont déjà installés. Et vous avez déjà utilisé npm install dans le répertoire racine de votre projet)

Puis éditez le fichier resources/assets/sass/app.scss et ajoutez en haut cette ligne:

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

Maintenant vous pouvez faire par exemple:

npm run dev

Cela crée des versions non terminées des ressources dans les dossiers appropriés. Si vous vouliez les réduire, exécutez-vous à la place:

npm run production

Et puis vous pouvez utiliser la police.

81
Kornel

Pour Police Awesome 5 (webfont avec css) et Laravel mixin ajouter un package pour la police awesome 5

_npm i --save @fortawesome/fontawesome-free
_

Et importer police awesome 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';
_

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

55
Karan

Comment faire pour installer la police Awesome 5 dans Laravel 5.6 (la bonne manière)

Construisez votre configuration webpack.mix.js.

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

Installez la dernière version gratuite de Font Awesome via un gestionnaire de paquets tel que npm.

npm install @fortawesome/fontawesome-free

Cette entrée de dépendance devrait maintenant figurer dans votre package.json.

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

Dans votre fichier SCSS principal /resources/sass/app.scss, importez 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';

Compilez vos actifs et produisez une version réduite, prête pour la production.

npm run production

Enfin, référencez votre fichier CSS généré dans votre modèle/mise en page de lame.

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

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

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">
21
Ramesh Navi

Pour Laravel> = 5.5

  • Exécuter npm install font-awesome --save
  • Ajouter @import "~font-awesome/scss/font-awesome.scss"; dans resources/assets/saas/app.scss
  • Exécutez npm run dev (ou npm run watch ou même npm run production)
15
rap-2-h

le chemin que vous utilisez n'est pas correct, vous pouvez simplement ouvrir le nœud_module et trouver le chemin de font-awesome. use pourrait utiliser la police js ou svg mais je préfère le style css.

utilisez d'abord cette commande pour installer font-awesome-free npm install --save-dev @fortawesome/fontawesome-free

après ça tu peux faire ça

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

et je copie le chemin de la police comme ci-dessous c'est facultatif

.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/fonts');

et enfin, lancez le script npm run dev ou npm run watch dans laravel

3
Farshad Fahimi

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

Les étapes sont similaires à la description ci-dessus. Mais dans mon cas, je devais effectuer des étapes supplémentaires, telles que la configuration du chemin d'accès aux polices Web à font-awesome dans le répertoire "public". Définition de la racine de la ressource dans Laravel mix etc. Vous pouvez trouver les détails dans le blog.

Je laisse le lien ici pour aider les personnes pour qui les solutions mentionnées ne fonctionnent pas.

3
Samundra
npm install font-awesome --save

ajouter le chemin ~/avant

@import "~/font-awesome/scss/font-awesome.scss";
2
Vahid Alvandi

J'utilise Laravel 5.5.14 et rien de ce qui précède n'a fonctionné pour moi. Alors voici les étapes que j'ai faites pour le faire fonctionner.

1. Installez font-awesome en utilisant npm:

   npm install font-awesome --save

2.Déplacez les polices dans 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 votre node_modules et quel chemin relatif utiliser pour la compilation:

$fa-font-path: "../fonts/font-awesome" !default;
@import "~font-awesome/scss/font-awesome.scss";
2
Hyder B.