php - update - Cómo instalar Font Awesome en Laravel Mix

usar font awesome en laravel

Question

He intentado instalar Font Awesome utilizando Laravel Mix pero cuando run npm dev ejecución de run npm dev recibo el siguiente mensaje:

Error al compilar con 1 errores
error en ./~/font-awesome/scss/font-awesome.scss Fallo en la compilación del módulo: / ** ^ CSS no válido después de "... cargar los estilos": se esperaba 1 selector o at-rule, era "var content = requi "en /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss (línea 1, columna 1)

Eliminé los comentarios en el archivo e intenté cambiar las rutas de las fuentes pero no resolvió el problema.

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

Para Laravel> = 5.5

• Ejecute npm install font-awesome --save
• Agregue @import "~font-awesome/scss/font-awesome.scss"; en resources/assets/saas/app.scss
• Ejecute npm run dev (o npm run watch o incluso npm run production )

Answer 2

Estoy usando Laravel 5.5.14 y ninguno de los anteriores funcionó para mí. Así que aquí están los pasos que hice para que funcione.

1.Instale font-awesome usando npm:

 npm install font-awesome --save

2. Mueva las fuentes a su directorio público agregando esta línea en su webpack.mixin.js

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

3. Abra su app.scss para especificar la ruta de las fuentes en sus node_modules y la ruta relativa que debe usar para la compilación:

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

Answer 3

Para Font Awesome 5 (webfont con css) y Laravel mixin add package for font awesome 5

npm i --save @fortawesome/fontawesome-free

E importe la fuente scss impresionante en app.scss o su archivo scss personalizado

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

compile sus activos npm run dev o npm run production e incluya su css compilado en el diseño

Answer 4

Para instalar font-awesome primero debes instalarlo con npm. Así que en el tipo de directorio raíz de su proyecto:

npm install font-awesome --save

(Por supuesto, asumo que tiene node.js y npm ya instalados. Y que ha hecho la npm install en el directorio raíz de su proyecto)

Luego edite el archivo resources/assets/sass/app.scss y agregue en la parte superior de esta línea:

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

Ahora puedes hacerlo por ejemplo:

npm run dev

Esto crea versiones no minadas de los recursos en las carpetas correctas. Si quisieras minimizarlos, correrías en su lugar:

npm run production

Y luego puedes usar la fuente.

Answer 5

Prueba en tu webpack.mix.js para agregar el ''*''

.copy(''node_modules/font-awesome/fonts/*'', ''public/fonts'')

Answer 6

Recientemente he escrito un blog al respecto para Laravel5.6. El enlace al blog es https://www.samundra.com.np/integrating-font-awesome-with-laravel-5.x-using-webpack/1574

Los pasos son similares a la descripción anterior. Pero en mi caso, tuve que hacer pasos adicionales como configurar la ruta de webfonts a font-awesome en el directorio "público". Configuración de la raíz de recursos en la mezcla de Laravel, etc. Puede encontrar los detalles en el blog.

Estoy dejando el enlace aquí para ayudar a las personas para quienes las soluciones mencionadas no funcionan.

Answer 7

Esto es para usuarios nuevos que están utilizando Laravel 5.7 y Fontawesome 5.3.

npm install @fortawesome/fontawesome-free --save

y en app.scss

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

correr

npm run watch

Uso en diseño

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

Answer 8

Para Laravel 5.6 y Font Awesome 5

Construye tu configuración webpack.mix.js.

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

Instalar fuente impresionante.

npm install @fortawesome/fontawesome-free

Esta línea debería estar ahora en tu package.json.

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

En /resources/sass/app.scss importe uno o más estilos.

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

Vamos a compilar todos nuestros activos y producir una compilación lista para producción.

npm run production

Finalmente, haga referencia a su nuevo archivo CSS en su diseño.

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

Answer 9

npm install font-awesome --save

agregar ~ / antes del camino

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