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

您不必走那么远就能让它工作，至少我不必这样做。

这是我安装tailwindcss后的配置laravel mix配置文件，因为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"

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

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

然后运行 ​​npm 命令编译

npm run dev

Answer 2

我无法让 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 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();