在 Laravel 8 中使用 Tailwind 安装 Font Awesome

Question

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

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

错误：找不到“~@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'),
        },
    },
};

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

我运行它：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 font awesome 可用之后。

Answer 3

步骤

在触发Laravel Mix 之前，我们希望在您的机器上安装Node.js and NPM。

node -v
npm -v

为Laravel Mix、Webpack、Autoprefixer 和 PostCSS 安装 Node 依赖项。

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

通过 npm 包管理器安装最新的免费版Font Awesome。

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

或

npm run prod

最后，在 Blade 模板/布局中引用生成的 CSS 文件。

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

混音愉快！

Answer 4

我知道这是旧的，但对其他人来说这是我的过程； Laravel 8 框架、Webpack、Laravel Mix。

在我的 webpack.mix.js 文件中，我使用以下内容：

if (mix.inProduction()) {
   mix.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/fonts/font-awesome');
}

然后在开始开发之前运行一次：

npm run production

这会将所有字体真棒文件复制到公用文件夹并确保它们在开发过程中不被复制。

然后，根据您将 font awesome 文件复制到的位置，您需要在主 .scss 文件中导入 font awesome 之前设置以下内容：

$fa-font-path:        "/fonts/font-awesome/";

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

注意 - 如果您不这样做，您编译的 .css 文件中引用的默认字体真棒公共路径将为 ../webfonts/ 并且无法由您的 .css 文件加载。

Answer 5

我也有同样的问题，我通过搜索解决方案找到了这个问题，但这里没有一个答案有效。 不知何故，我刚刚设法解决了这个问题，尽管我担心这是一个相当肮脏的解决方案。也许对 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`
    )

Answer 6

检查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';