[英]I failed to install Font Awesome in Laravel 8 app
我想在我的 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";
我得到一个错误。
错误 in./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 包含在安装中:
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
但是修改文件资源/css/app.css:
@import "node_modules/font-awesome/css/font-awesome.css";
我仍然看到错误:
错误 in./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'
看来我正确设置了路径/文件名,但为什么会出错?
由于 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
请参考本文档。
这就是我在使用安装 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
可能已经成功了
你可以用这个
@import '~font-awesome/css/font-awesome.css';
.
我找到了免费版本的决定:
使用命令安装
npm install --save @fortawesome/fontawesome-freeI
在 app.js 添加
require('@fortawesome/fontawesome-free/js/all.min.js');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.