在Laravel 8中使用Tailwind安装Font Awesome [英] Installing Font Awesome with Tailwind in Laravel 8

问题描述

我正在尝试将具有新功能的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'),
        },
    },
};

推荐答案

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

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

.

这篇关于在Laravel 8中使用Tailwind安装Font Awesome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！