[英]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.