在 Laravel 8 中使用 Tailwind 安装 Font Awesome

Question

我正在尝试使用 Inertia 将 Font Awesome 添加到新安装的 Laravel 8 Jetstream，但收到以下错误

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

错误：找不到“~@fortawesome/fontawesome-free/scss/brands”

应用程序.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();
}

网络包配置

const path = require('path');

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

Answer 1

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

。

Answer 2

检查 fontawesome 的拼写。

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