Laravel 8 FontAwesome 目录不正确

Question

我刚刚尝试将 FontAwesome 添加到我的 Laravel 8 项目之一（使用 TailwindCSS）。我已经使用

安装了它

npm install @fortawesome/fontawesome-free

然后将其添加到 ./resources/css/app.css（使用我的 TailwindCSS 导入）

@tailwind base;
@tailwind components;
@tailwind utilities;

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

然后使用

应用构建

npm run production

但是它给我一个关于字体文件的 404 错误。它们正确地位于 ./public/fonts 目录中，但编译后的 css 文件正在 Web 服务器根目录中查找它们。

如果我手动修改编译好的css文件来替换

src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?08f9891a6f44d9546678133ab121fc54);

和

src: url(../fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?08f9891a6f44d9546678133ab121fc54);

然后它工作正常，我如何指定 FontAwesome 目录，这样我就不必进行此手动编辑？

更新

经过一番挖掘，我找到了包含以下代码的文件 ./node_modules/laravel-mix/src/config.js

fileLoaderDirs: {
    images: 'images',
    fonts: 'fonts'
},

这似乎是 FontAwesome 从中获取目录的地方，但是有什么方法可以覆盖它吗？

Answer 1

我无法让 FontAwesome 与 PostCSS 一起工作，但我能够让它与 SASS 一起工作。

我看到有几种不同的方法可以使用 Laravel 8 设置 SASS，但我只是发布对我有用的方法，以防它能帮助到其他人。

先把css改成scss

mv ./resources/css ./resources/sass
mv ./resources/sass/app.css ./resources/sass/app.scss

然后将 TailwindCSS 和 FontAwesome 导入添加到 app.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

$fa-font-path: "../webfonts";  // this might be the missing piece that doesn't work without SASS
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";

将webpack.mix.js改为以下

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

mix
    .js('resources/js/app.js', 'public/js')
    .copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts')
    .sass('resources/scss/app.scss', 'public/css')
    .options ({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ]
    });

用npm run production

编译

Answer 2

你不必为了让它工作而走这么远，至少我不需要。

这是我的配置 laravel 安装 tailwindcss 后的混合配置文件，因为 tail wind 使用 postcss。这是安装 tailwindcss 和 font-awesome 后执行的步骤。

mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
     require('postcss-import'),
     require('tailwindcss'),
     require('autoprefixer'),
 ]);

添加安装font-awesome后，我刚添加了这一行

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') // transpiling app.scss
    .copy( // copying fonts directory 
        'node_modules/@fortawesome/fontawesome-free/webfonts',
        'public/webfonts'
    ).sourceMaps();

然后我在 resoures/sass/app.scss 中有一个带有 font-awesome 导入的 sass 文件，因为 font-awesome 是使用 sass 添加的。

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

我的 app.css 文件 resources/css/app.css 看起来像这样

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

之后运行 npm 命令编译

npm run dev

Answer 3

我在没有 Laravel 的项目中使用 Laravel Mix，我在使用 Font Awesome 时遇到了这个问题。经过几个小时的搜索，我能够解决问题（我认为）：

webpack.mix.js

let mix = require("laravel-mix");

mix.options({
    fileLoaderDirs: {
        images: 'dist/images',
        fonts: 'dist/fonts'
    }
});

mix
    .postCss("assets/css/app.css", "dist")
    .js("assets/js/app.js", "dist")
    .sourceMaps();

Laravel 8 FontAwesome 目录不正确

Laravel 8 FontAwesome Incorrect Directory

font-awesome

laravel-mix

laravel-8