在Laravel 8中使用Tailwind安装Font Awesome

本文介绍了在Laravel 8中使用Tailwind安装Font Awesome的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试将具有新功能的Font Awesome添加到具有惯性的Laravel 8 Jetstream中，但是会收到以下错误消息

I'm trying to add Font Awesome to newly installed Laravel 8 Jetstream with Inertia but receiving the following error

来自PostCSS插件的未知错误.您当前的PostCSS版本是8.2.4，但是postcss-import使用7.0.35.也许这是以下错误的根源.

错误:无法找到〜@ fortawesome/fontawesome-free/scss/brands"

Error: Failed to find '~@fortawesome/fontawesome-free/scss/brands'

App.css

@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; @import '~@fortawesome/fontawesome-free/scss/brands'; @import '~@fortawesome/fontawesome-free/scss/regular'; @import '~@fortawesome/fontawesome-free/scss/solid'; @import '~@fortawesome/fontawesome-free/scss/fontawesome';

Webpack.mix

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

Webpack配置

const path = require('path'); module.exports = { resolve: { alias: { '@': path.resolve('resources/js'), }, }, };

推荐答案

首先，设置webpack.mix.js如下:

First, set up webpack.mix.js as follows: 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:

2.- Go ahead and install fontawesome:

npm install --save @fortawesome/fontawesome-free

3.-创建一个新文件" resources/sass/app.scss "并包括以下内容:

3.- Create a new file "resources/sass/app.scss" and include the following:

@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.-执行以下命令:

4.- Execute the following commands:

npm install && npm run dev

再来一次

npm run dev

.