要在 Laravel 的專案中使用 Tailwind CSS 和 Font Awesome 的方法如下:
1. 修改 webpack.mix.js 如下:
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');
if (mix.inProduction()) {
mix.version();
}
2. 安裝 fontawesome
npm install --save @fortawesome/fontawesome-free
3. 新增檔案 resources/sass/app.scss 並讀入 fontawsome
@import '~@fortawesome/fontawesome-free/scss/fontawesome'; @import '~@fortawesome/fontawesome-free/scss/regular'; @import '~@fortawesome/fontawesome-free/scss/solid'; @import '~@fortawesome/fontawesome-free/scss/brands';
4. 執行 npm run watch/dev/prod
如果路徑沒有錯應該就能夠順利使用了。
參考:
Installing Font Awesome with Tailwind in Laravel 8