1.安装bootstrap
composer require laravel/ui --dev
2.引入bootstrap
php artisan ui bootstrap
3.Bootstrap 是以 NPM 扩展包的形式集成到 Laravel 项目中的. 在package.json中可发现:
- bootstrap —— Bootstrap NPM 扩展包;
- jquery —— jQuery NPM 扩展包;
- laravel-mix —— 由 Laravel 官方提供的静态资源管理工具。
这些扩展包,为 Laravel 提供了一套完整的前端工作流。
4.可以使用 NPM 对这些扩展包进行安装。
先使用国内镜像加速:
$ npm config set registry=https://registry.npm.taobao.org $ yarn config set registry 'https://registry.npm.taobao.org'
5.使用 Yarn 对扩展包进行安装,请在项目根目录下运行以下命令进行安装:
$ yarn install --no-bin-links $ yarn add cross-env
6.编辑resources/sass/app.scss
@import '~bootstrap/scss/bootstrap';
7.将 Bootstrap 导入成功之后,需要使用以下命令来将 .scss
文件编译为 .css
才能正常使用
npm run dev
或使用以下命令实时监测.scss变化并及时编译为.css
npm run watch-poll
(在进行项目开发时 npm run watch-poll
必须一直运行着,避免出现前端文件更改后没有应用到页面上)。
所有编译后的资源文件都被存放在 public
文件夹中,在 public/css
文件夹中看到刚刚编译成功之后的文件。
8.在所需视图页面的<head>中引入:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">