Как установить Font Awesome в Laravel Mix

Question

Как установить Font 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...

29

laravel laravel-5 laravel-mix php webpack

Решение

Другие решения

За Font Awesome 5 (веб-шрифт с CSS) а также Laravel mixin добавить пакет для шрифта Awesome 5

npm i --save @fortawesome/fontawesome-free

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

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

собрать ваши активы npm run dev или же npm run production и включите ваш скомпилированный CSS в макет

30

Для 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)

14

Для Laravel 5.6 и Font Awesome 5

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

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

Установите шрифт Awesome.

npm install @fortawesome/fontawesome-free

Теперь эта строка должна быть в вашем package.json.

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

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

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

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

npm run production

Наконец, ссылка на ваш новый файл CSS в макете.

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

14

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

npm install @fortawesome/fontawesome-free --save

и в app.scss

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

Бежать

npm run watch

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

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

11

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

Шаги аналогичны приведенному выше описанию. Но в моем случае мне пришлось сделать дополнительные шаги, такие как настройка пути веб-шрифтов к font-awesome в «публичном» каталоге. Настройка корневого ресурса в микс Laravel и т. Д. Подробности можно найти в блоге.

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

3

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

1. Установите font-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";

2

npm install font-awesome --save

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

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

1

Источник

Accepted Answer

Чтобы установить font-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

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

67