Установка Font Awesome с Tailwind в Laravel 8

У меня работает, запустив: npm install font-awesome --save

Я создал resources/sass/custom.scss и добавил .sass('resources/sass/custom.scss', 'public/css'); в

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ])
    .webpackConfig(require('./webpack.config'))
    .sass('resources/sass/custom.scss', 'public/css');

в webpack.mix.js.

Затем добавляем @import "node_modules/font-awesome/scss/font-awesome.scss"; к resources/sass/custom.scss.

После running npm run watch отличный шрифт стал доступен.

1. Сначала настройте webpack.mix.js следующим образом:

   mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
   
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
   .sass('resources/sass/app.scss', 'public/css');
   if (mix.inProduction()) {
       mix.version();
   }
   

2.- Продолжайте и установите fontawesome:

npm install --save @fortawesome/fontawesome-free

3.- Создайте новый файл 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';

4.- Выполните следующие команды:

npm install && npm run dev

и снова

npm run dev

.

Шаги

Перед запуском Laravel Mix нам нужно Node.js и NPM установлены на вашем компьютере.

node -v
npm -v

Установите зависимости узла для Laravel Mix, Webpack, Autoprefixer и PostCSS.

npm install autoprefixer@latest && npm install laravel-mix@latest && npm install postcss@latest && npm install webpack@latest --save-dev

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

npm install @fortawesome/fontawesome-free --save-dev

Затем создайте конфигурацию webpack.mix.js. Обратите внимание, что стандартная установка Laravel 8 больше не использует SASS (как мы это делали в предыдущих версиях Laravel) для компиляции наших ресурсов CSS.

const mix = require('laravel-mix');

mix.setPublicPath('public')
mix.setResourceRoot('../');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
    //
]);

Следующая запись зависимости теперь должна быть в вашем package.json.

// Font Awesome
"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",

В /resources/css/app.css, импортировать один или несколько стилей в зависимости от того, какой набор значков вы хотите использовать.

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

Теперь мы хотим обновить наш package.json, чтобы использовать новый Mix CLI. Измените раздел сценариев в package.json на следующий.

"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
},

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

npx mix -p

OR

npm run prod

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

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

Удачного смешивания!

У меня такая же проблема, я нашел этот вопрос, ища решение, но ни один из ответов здесь не сработал. Каким-то образом мне удалось это решить, хотя, боюсь, это довольно грязное решение. Возможно, кто-нибудь с большим знанием Mix сможет это исправить.

Вот что я сделал в своем файле webpack.mix.js, чтобы это исправить:

 /*
 * slow compile fix: https://github.com/tailwindlabs/tailwindcss/discussions/1514#discussioncomment-51903
 */

const mix = require('laravel-mix');

mix.js(
    'resources/js/app.js', 
    'public/js'
    )
    .postCss(
        'resources/css/tailwind.css', 
        'public/build/css',
        [
            require('postcss-import'),
            require('tailwindcss'),
            require('autoprefixer'),
        ]
    )
    .postCss(
        'node_modules/@fortawesome/fontawesome-free/css/all.css', 
        'public/build/css', 
        [
            require('postcss-import'),
            require('autoprefixer'),
        ]
    )
    .postCss(
        'resources/css/main.css', 
        'public/build/css', 
        [
            require('postcss-import'),
            require('autoprefixer'),
        ]
    )
    .combine(
        [
            `public/build/css/all.css`,
            `public/build/css/tailwind.css`,
            `public/build/css/main.css`, 
        ],
        `public/css/app.css`
    )

Проверьте правописание слова fontawesome.

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