Laravel 5.7 + 字体真棒答案

【问题标题】：Laravel 5.7 + Font AwesomeLaravel 5.7 + 字体真棒
【发布时间】：2018-09-20 21:21:30
【问题描述】：

我正在尝试在 Laravel 5.7 中包含 Font Awesome 工具包。

这些是我采取的步骤：

1) 运行npm install --save-dev @fortawesome/fontawesome-free

2) 检查node_modules/ 中的文件夹，一切正常。

$fa-font-path: "../webfonts";

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

3) 然后我跑了……

npm run development -- --watch

4) 我在public/fonts/vendor/@fortawesome/fontawesome-free/ 中看到文件。

但是，当我转到浏览器时，图标看起来像这样：

【问题讨论】：

您的前端文件是否加载了放置 fontawesome 的公共文件夹中的 css？

标签： laravel-5 npm font-awesome laravel-mix laravel-5.7

【解决方案1】：

Laravel 5.7 到 7.x 使用 Font Awesome 5（正确的方式）

构建您的 webpack.mix.js 配置。

mix.setResourceRoot('../');
mix.setPublicPath('public')

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

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

npm install @fortawesome/fontawesome-free --save-dev

此依赖项现在应该在您的package.json 中。

// Font Awesome
"devDependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",

在您的主 SCSS 文件中，/resources/sass/app.scss 导入一种或多种样式。

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

编译您的资产并生成一个缩小的、可用于生产的构建。

npm run production

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

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

【讨论】：

你好，伙计！感谢您的回答。我这样做了，但是：错误无法编译，出现 15 个错误13:30:59 找不到这些相关模块：* ./@fortawesome//fa-brands-400.eot in ./node_modules/css-loader??ref- -5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/lib/loader.js? ?ref--5-5!./resources/sass/app.scss ...etc.. 和 .... ./resources/sass/app.scss 中的错误模块构建失败：ModuleNotFoundError：找不到模块: Error: Can't resolve './@fortawesome//fa-brands-400.eot' in \resources\sass' ...等...谢谢！！
我可以使用第一个选项，但是在 new 项目中，我不知道为什么不在其他项目中......
你知道如何删除 Font Awesome 的文件并重新开始吗？
@Nico 是的，您可以删除 public/fonts/vendor 中的 @fortawesome/ 文件夹。 rm -rf /Users/Nico/Sites/laravel/public/fonts/vendor/@fortawesome/
@whisk 使用其中一个。

【解决方案2】：

如下更新你的 webpack.mix.js 配置：

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

mix.setPublicPath('public');
mix.setResourceRoot('../');

在终端中输入“npm run dev”并回车

【讨论】：

mix.setResourceRoot('../'); 为我做的