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 协议》，转载必须注明作者和本文链接