我未能在 Laravel 8 应用程序中安装 Font Awesome

Posted 2023-03-07

【中文标题】我未能在 Laravel 8 应用程序中安装 Font Awesome

【英文标题】：I failed to install Font Awesome in Laravel 8 app

【发布时间】：2021-08-10 15:18:01

【问题描述】：

我想在我的 Laravel 8/Tailwind CSS 2.0.1 应用程序中添加 Font Awesome，搜索后按以下方式安装。

npm install font-awesome --save

然后我在文件 /mnt/_work_sdb8/wwwroot/lar/Hostels4/resources/css/app.css 中添加该行

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

@import "node_modules/font-awesome/scss/font-awesome.scss";

我收到一个错误。

./resources/css/app.css 中的错误模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）： ModuleBuildError：模块构建失败（来自 ./node_modules/postcss-loader/dist/cjs.js）： 错误：找不到'node_modules/font-awesome/scss/font-awesome.scss'

但是我在...中找到了引用的文件

node_modules/font-awesome/scss$ ls -la
total 105
drwxrwxrwx 1 root root  4096 May 21 14:12 .
drwxrwxrwx 1 root root  4096 May 21 14:12 ..
-rwxrwxrwx 1 root root   715 Oct 25  2016 _animated.scss
-rwxrwxrwx 1 root root   592 Oct 25  2016 _bordered-pulled.scss
-rwxrwxrwx 1 root root   459 Oct 25  2016 _core.scss
-rwxrwxrwx 1 root root   120 Oct 25  2016 _fixed-width.scss
-rwxrwxrwx 1 root root   430 Oct 25  2016 font-awesome.scss
-rwxrwxrwx 1 root root 50498 Oct 25  2016 _icons.scss
-rwxrwxrwx 1 root root   375 Oct 25  2016 _larger.scss
-rwxrwxrwx 1 root root   378 Oct 25  2016 _list.scss
-rwxrwxrwx 1 root root  1637 Oct 25  2016 _mixins.scss
-rwxrwxrwx 1 root root   783 Oct 25  2016 _path.scss
-rwxrwxrwx 1 root root   672 Oct 25  2016 _rotated-flipped.scss
-rwxrwxrwx 1 root root   134 Oct 25  2016 _screen-reader.scss
-rwxrwxrwx 1 root root   482 Oct 25  2016 _stacked.scss
-rwxrwxrwx 1 root root 22644 Oct 25  2016 _variables.scss

并且在 webpack.mix.js 文件中，resources/css/app.css 包含在 install 中：

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


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

if (mix.inProduction()) 
    mix.version();



$ node -v
v14.16.0

$ npm -v
7.14.0

$ php artisan --version
Laravel Framework 8.42.1

出了什么问题，如何解决？

修改： 我找到了带有文件的引用目录：

/node_modules/font-awesome/css$ ls -la
total 100
drwxrwxrwx 1 root root     0 May 21 14:12 .
drwxrwxrwx 1 root root  4096 May 21 14:12 ..
-rwxrwxrwx 1 root root 37414 Oct 25  2016 font-awesome.css
-rwxrwxrwx 1 root root 21778 Oct 25  2016 font-awesome.css.map
-rwxrwxrwx 1 root root 31000 Oct 25  2016 font-awesome.min.css

但是修改文件resources/css/app.css：

@import "node_modules/font-awesome/css/font-awesome.css";

我仍然看到错误：

./resources/css/app.css 中的错误模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）： ModuleBuildError：模块构建失败（来自 ./node_modules/postcss-loader/dist/cjs.js）： 错误：找不到'node_modules/font-awesome/css/font-awesome.css'

看来我设置的路径/文件名是正确的，但是为什么会出错呢？

【问题讨论】：

您包含.scss 文件，font-awesome 不是有一个dist 文件夹，其中包含预编译的.css (.min.css) 文件吗？如果是这样，请尝试使用那些

请看修改：

【参考方案1】：

这就是我在使用 font-awsome 安装后所做的事情

npm install --save @fortawesome/fontawesome-free（见https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers）

在我的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';

然后运行 ​​npm-run dev 应该可以工作

在您的情况下，在导入中删除 .scss 可能已经成功了

【讨论】：

这个应用安装后没有app.scss，文件，只有resources/css/app.css，在webpack.mix.js中引用。我在上面展示它们

【参考方案2】：

你可以用这个

@import '~font-awesome/css/font-awesome.css';.

【讨论】：

它没有帮助。我得到：错误：找不到'~font-awesome/css/font-awesome.css'

【参考方案3】：

我找到了免费版本的决定：

使用命令安装

npm install --save @fortawesome/fontawesome-freeI

在 app.js 中添加

require('@fortawesome/fontawesome-free/js/all.min.js'); 

线 有了这个https://fontawesome.com/icons?d=gallery&p=2&m=free 可访问的图标

【参考方案4】：

由于 Laravel 8 现在使用 PostCSS，你可能会想要抛弃 SASS 并使用 CSS。以下是正确的方法。

首先，安装最新的免费版 Font Awesome。

npm install -D @fortawesome/fontawesome-free

添加一个或多个 Font Awesome 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';

然后运行...

npm run prod

请参考document。