Intenté instalar Font Awesome usando Laravel Mix pero al ejecutar run npm dev recibo el siguiente mensaje:
ERROR No se pudo compilar con 1 error
error en ./~/font-awesome/scss/font-awesome.scss Error al compilar el módulo: /** ^ CSS no válido después de "... cargar los estilos": se esperaba 1 selector o regla at, 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 del archivo e intenté cambiar las rutas de 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...Para instalar font-awesome, primero debe instalarlo con npm. Entonces, en el directorio raíz de su proyecto, escriba:
npm install font-awesome --save (Por supuesto, supongo que ya tiene node.js y npm instalados. Y ha npm install en el directorio raíz de sus proyectos)
Luego edite el archivo resources/assets/sass/app.scss y agregue en la parte superior esta línea:
@import "node_modules/font-awesome/scss/font-awesome.scss";Ahora puedes hacer por ejemplo:
npm run devEsto genera versiones no minimizadas de los recursos en las carpetas correctas. Si quisiera minimizarlos, en su lugar ejecutaría:
npm run productionY luego puedes usar la fuente.
Para Font Awesome 5 (webfont con css) y Laravel mixin , agregue el paquete para font awesome 5
npm i --save @fortawesome/fontawesome-freeE importe la fuente impresionante scss 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
Cree su configuración webpack.mix.js .
mix.setPublicPath('public'); mix.setResourceRoot('../'); mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css');Instale la última versión gratuita de Font Awesome a través de un administrador de paquetes como npm.
npm install @fortawesome/fontawesome-free --save-devEsta entrada de dependencia ahora debería estar en su paquete.json .
// Font Awesome "devDependencies": { "@fortawesome/fontawesome-free": "^5.15.3",En su archivo SCSS principal /resources/assets/sass/app.scss , importe uno o más estilos.
@import '~@fortawesome/fontawesome-free/scss/fontawesome'; @import '~@fortawesome/fontawesome-free/scss/regular'; @import '~@fortawesome/fontawesome-free/scss/solid'; @import '~@fortawesome/fontawesome-free/scss/brands';Compile sus activos y produzca una compilación minimizada y lista para producción.
npm run productionFinalmente, haga referencia a su archivo CSS generado en su plantilla/diseño de Blade.
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">https://gist.github.com/karlhillx/89368bfa6a447307cbffc59f4e10b621