大家好，好久没更新博客，今日冒个泡，自从Laravel更新到了8.0 很多东西都不太一样了，今天说下如何在laravel8.x 上面使用bootstrap

前端工具包。

Laravel 项目中使用 Bootstrap 前端框架，需要先执行以下命令：

composer require laravel/ui:^3.0 --dev

composer require 是用来安装扩展包使用的命令，参数 --dev 是指定此扩展包只在开发环境中使用。

上面的命令安装完成后，使用以下命令来引入 Bootstrap ：

$ php artisan ui bootstrap

Bootstrap 是以 NPM 扩展包的形式集成到 Laravel 项目中的，NPM 是 Node.js（一个基于 Google V8 引擎的 JavaScript 运行环境）的包管理和分发工具。Composer 的一些概念也是从 NPM 中借鉴过来的，因此 NPM 也有个类似 composer.json 文件的 package.json 文件：

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0"
    }
}

以上的 NPM 扩展包，我们重点看以下几个：

bootstrap —— Bootstrap NPM 扩展包；jquery —— jQuery NPM 扩展包；laravel-mix —— 由 Laravel 官方提供的静态资源管理工具。

这些扩展包，为 Laravel 提供了一套完整的前端工作流。

我们可以使用 NPM 对这些扩展包进行安装，但由于 NPM 的安装速度，安全性和稳定性等都饱受开发者的诟病。因此我们在教程中改用 Facebook 在 2016 年的 10 月份开源的 Yarn 来作为 NPM 的替代品，在后面的章节中我将为大家详细讲解 NPM 和 Yarn 之间的关系。

开始安装之前，我们需要设置安装器来使用国内的淘宝镜像加速，加速镜像的原理是使用国内的 CDN 来下载所需代码包，会更加顺畅：

$ npm config set registry=https://registry.npm.taobao.org
$ yarn config set registry 'https://registry.npm.taobao.org'

现在先让我们使用 Yarn 对扩展包进行安装，请在项目根目录下运行以下命令进行安装：

$ SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass yarn
$ yarn add cross-env

在 yarn 命令前添加 SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass 的目的是告诉 yarn 到淘宝的镜像去下载 node-sass 二进制文件。

在本教程提供的定制化 Homestead 安装包中，我们已默认为大家集成了 Yarn，因此不必再进行重复安装 Yarn，若你想了解具体的安装方式，可查阅 Yarn 官方安装文档。

安装完成之后，让我们对 Laravel 默认生成的 app.scss 文件进行编辑，删除此文件里的所有内容，只留下面一行，导入 Bootstrap：

resources/sass/app.scss

// Bootstrap
@import '~bootstrap/scss/bootstrap';

细心的你可能会发现上面新建的样式文件后缀名（.scss）有别我们之前经常看到的样式文件后缀名（.css），这是因为 .scss 是 Sass（一种 CSS 开发工具）专属的文件格式，我们后面会再对 Sass 相关的知识进行补充讲解。

将 Bootstrap 导入成功之后，我们需要使用以下命令来将 .scss 文件编译为 .css 才能正常使用，编译命令如下。通过下面的命令，在每次检测到 .scss 文件发生更改时，自动将其编译为 .css 文件：

$ npm run watch-poll

请保证在进行项目开发时 npm run watch-poll 一直运行着，避免出现前端文件更改后没有应用到页面上的歧义。

执行成功可以看到以下：

所有编译后的资源文件都被存放在 public 文件夹中，你能在 public/css 文件夹中看到刚刚编译成功之后的文件。

至此我们就完成了Laravel8x 版本的 bootstarap 包的 安装 感谢阅读，下次再见