Как установить шрифт Awesome в Laravel Mix

Я пытался установить Font Awesome, используя Laravel Mix, но при выполнении команды run npm dev я получаю следующее сообщение:

ОШИБКА Не удалось скомпилировать с 1 ошибкой
ошибка в. /~/font-awesome/scss/font-awesome.scss Сбой сборки модуля:/** ^ Неверный CSS после "... загрузить стили": ожидался 1 селектор или правило, было "var content = Requi "в /var/www/html/blog/node_modules/font-awesome/scss/font-awesome.scss (строка 1, столбец 1)

Я удалил комментарии в файле и попытался изменить путь шрифта, но это не решило проблему.

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

ОТВЕТЫ

Ответ 1

Чтобы установить шрифт-awesome, вы должны сначала установить его с помощью npm. Итак, в вашем корневом каталоге вашего проекта:

npm install font-awesome --save

(Конечно, я предполагаю, что у вас уже установлены node.js и npm. И вы сделали npm install в корневой директории проектов)

Затем отредактируйте файл resources/assets/sass/app.scss и добавьте вверху этой строки:

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

Теперь вы можете сделать, например:

npm run dev

Это создает неустановленные версии ресурсов в правильных папках. Если вы хотите их минимизировать, вы должны запустить:

npm run production

И затем вы можете использовать шрифт.

Ответ 2

Для шрифта Awesome 5 (webfont css) и Laravel mixin добавьте пакет для шрифта awesome 5

npm i --save @fortawesome/fontawesome-free

И импортируйте шрифт awesome scss в app.scss или ваш собственный файл scss

@import '[email protected]/fontawesome-free/scss/brands';
@import '[email protected]/fontawesome-free/scss/regular';
@import '[email protected]/fontawesome-free/scss/solid';
@import '[email protected]/fontawesome-free/scss/fontawesome';

скомпилируйте свои активы npm run dev или npm run production и включите скомпилированный css в макет

Ответ 3

Как установить Font Awesome 5 в Laravel 5.6 (правильный путь)

Создайте свою конфигурацию webpack.mix.js.

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

Установите последнюю бесплатную версию Font Awesome через менеджер пакетов, например, npm.

npm install @fortawesome/fontawesome-free

Эта запись о зависимости теперь должна быть в вашем package.json.

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

В основном файле SCSS/resources/sass/app.scss импортируйте один или несколько стилей.

@import '[email protected]/fontawesome-free/scss/fontawesome';
@import '[email protected]/fontawesome-free/scss/regular';
@import '[email protected]/fontawesome-free/scss/solid';
@import '[email protected]/fontawesome-free/scss/brands';

Скомпилируйте свои активы и создайте минимизированную готовую к сборке сборку.

npm run production

Наконец, ссылайтесь на сгенерированный CSS файл в шаблоне/макете Blade.

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

Ответ 4

Это для новых пользователей, которые используют Laravel 5.7 и Fontawesome 5.3

npm install @fortawesome/fontawesome-free --save

и в app.scss

@import '[email protected]/fontawesome-free/css/all.min.css';

Бежать

npm run watch

Использование в макете

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

Ответ 5

Для Laravel >= 5.5

  • Выполнить npm install font-awesome --save
  • Добавить @import "~font-awesome/scss/font-awesome.scss"; в resources/assets/saas/app.scss
  • Запустите npm run dev (или npm run watch или даже npm run production)

Ответ 6

Я использую Laravel 5.5.14, и ни один из вышеперечисленных не работал у меня. Итак, вот шаги, которые я сделал, чтобы заставить его работать.

1.Установите шрифт-awesome с помощью npm:

   npm install font-awesome --save

2. Переместите шрифты в общий каталог, добавив эту строку в webpack.mixin.js

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

3. Откройте приложение app.scss, чтобы указать путь к шрифтам в node_modules и какой относительный путь для компиляции:

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

Ответ 7

Я недавно написал блог об этом для Laravel5.6. Ссылка на блог - https://www.samundra.com.np/integrating-font-awesome-with-laravel-5.x-using-webpack/1574

Этапы аналогичны приведенному выше описанию. Но в моем случае мне пришлось сделать дополнительные шаги, такие как настройка пути webfonts к шрифту-awesome в "общедоступном" каталоге. Установка корня ресурса в сочетании с Laravel и т.д. Подробности можно найти в блоге.

Я оставляю ссылку здесь, чтобы она помогала людям, для которых упомянутые решения не работают.

Ответ 8

неверный путь, который вы используете, вы можете просто открыть node_module и найти путь к font-awesome. Использование может использовать шрифт JS или SVG, но я предпочитаю стиль CSS.

сначала используйте эту команду для установки шрифт-awesome-free npm install --save-dev @fortawesome/fontawesome-free

после этого вы можете сделать это

@import "[email protected]/fontawesome-free/scss/fontawesome";
@import "[email protected]/fontawesome-free/scss/regular";
@import "[email protected]/fontawesome-free/scss/solid";
@import "[email protected]/fontawesome-free/scss/brands";

и я копирую путь шрифта, как показано ниже, это необязательно

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

и, наконец, просто запустите скрипт npm run dev или npm run watch в laravel

Ответ 9

npm install font-awesome --save

добавить ~/до пути

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

Ответ 10

Попробуйте следующее:

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

Ответ 11

Попробуйте в своем webpack.mix.js добавить '*'

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