Laravel8開荒~正確安裝前端Bootstrap CSS庫

Laravel8拋棄了Bootstrap,使用Laravel Jetstream,對於習慣了Bootstrap的老使用者來說著實不是一件好事。因為其使用的ui庫為livewire。無形中提高了學習成本。

1.安裝最新的Bootstrap

$ composer require laravel/ui:^3.0 --dev

2.引入Bootstrap

$ php artisan ui bootstrap

3.執行npm命令

$ npm install

該命令會下載node_modules資料夾，裡面就包括了bootstrap,當然這一切的前提是，你的npm已經換為aliyun的源了！

4.然後安裝兩個所需模組

$ npm install --no-bin-link

$ npm add cross-env

5.刪除不需要的目錄

$ sudo rm -rf resources/css

因為Laravel8安裝後resources目錄會有一個css目錄，估計這個是為Tailwind CSS所準備的吧!

6.最後最佳化，解決瀏覽器快取問題

開啟webpack.min.js檔案，在.sass()方法後新增.version()方法

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css').version();//here

7.生成編譯檔案

$ npm run dev

執行以上命令後，會自動生成編譯好的js和css檔案到public目錄
如果你想實時監聽scss檔案和js原始檔的修改,使用以下命令：

$ npm run watch-poll

愉快的使用bootstrap吧。

本作品採用《CC 協議》，轉載必須註明作者和本文連結