在 Laravel 專案使用 Tailwind CSS 和 Font Awesome

分享:

要在 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 '[email protected]/fontawesome-free/scss/fontawesome';
@import '[email protected]/fontawesome-free/scss/regular';
@import '[email protected]/fontawesome-free/scss/solid';
@import '[email protected]/fontawesome-free/scss/brands';

 

4. 執行 npm run watch/dev/prod

如果路徑沒有錯應該就能夠順利使用了。

 

參考:
Installing Font Awesome with Tailwind in Laravel 8

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。