Laravel 如何引入 Bootstrap
如官方文档所言,Laravel 并不强制你使用 CSS 框架,但是开箱提供了对 Bootstrap 的支持,在 resources/js/bootstrap.js
(在 Laravel 5.7 之前的版本位于 resources/assets/js/bootstrap.js
)中,我们可以看到对 bootstrap
js库的引入
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
然后在 resources/js/app.js
中又引入了这个 bootstrap.js
文件
require('./bootstrap');
这样我们在编译前端资源的时候就会将 Bootstrap 相关 js 文件加载进来。对于 Bootstrap 所需 CSS 文件,会在 resources/sass/app.scss
中引入:
@import '~bootstrap/scss/bootstrap';
从 Laravel 5.5 开始 Laravel 使用的 Bootstrap 版本就是 4.*
,这个可以在项目根目录下的 package.json
中查看:
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"vue": "^2.5.7"
}
运行 npm install 安装 Bootstrap 库
运行 npm install 安装 Bootstrap 库
上述 package.json
可类比为前端的 composer.json
,我们通过 npm install
安装该文件中定义的依赖,就好比运行 composer install
安装 composer.json
中定义的依赖,只不过一个是安装的是 JavaScript 库,一个是安装的是 PHP 库。
如果你还没有在项目根目录下运行过 npm install
初始化项目依赖的前端资源,现在可以运行它,当然在此之前,需要在你的系统中安装最新版本的 Node.js。如果你使用的开发环境是 Homestead 的话,那么系统已经为你安装好了,去 Homestead 中执行即可;如果你使用的是 Laradock 的话,需要在 laradock/.env
中设置 WORKSPACE_INSTALL_NODE
选项为 true
:
WORKSPACE_INSTALL_NODE=true
然后重新构建 workspace
容器,具体可参考Laradock文档。如果你是在 Windows 或 Mac 原生环境下使用 npm
命令,需要去官网选择对应系统的最新版本安装,安装完 Node 后,npm
也会随之安装,不必再单独安装。
运行 npm install
会在项目根目录下新增一个 node_modules
目录,并将项目依赖的所有 JavaScript 库安装到该目录下,其中就包括 bootstrap
运行 npm run dev 编译前端资源
接下来,我们就可以运行 npm run dev
命令通过 Laravel Mix 来编译前端资源了,该命令定义在 package.json
中: