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

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 庫

上述 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 容器，具體可參考Laradock文檔。如果你是在 Windows 或 Mac 原生環境下使用 npm 命令，需要去官網選擇對應系統的最新版本安裝，安裝完 Node 後，npm 也會隨之安裝，不必再單獨安裝。

運行 npm install 會在項目根目錄下新增一個 node_modules 目錄，並將項目依賴的所有 JavaScript 庫安裝到該目錄下，其中就包括 bootstrap：

運行 npm run dev 編譯前端資源

接下來，我們就可以運行 npm run dev 命令通過 Laravel Mix 來編譯前端資源了，該命令定義在 package.json 中：

該命令最終運行的是 npm run development 命令，意為在開發環境對前端資源進行編譯，如果需要的話你可以在這裏對命令參數進行修改，如果是在生產環境，需要運行 npm run prod 命令，如果在開發環境中想要修改文件後自動編譯資源可以運行 npm run watch 命令。

Laravel Mix 是對 Webpack 進行封裝後提供給 Laravel 項目使用的前端打包工具，Webpack 是目前最新的、廣泛使用的前端資源打包工具（之前還有 Grunt、Gulp 等），能夠以模塊方式處理所有前端資源，Laravel Mix 對其提供的功能進行了封裝從而避免後端開發人員大量編寫 Webpack 配置命令，大多數時候我們需要在 resources/js/app.js 和 resources/sass/app.scss 中編寫代碼，引入其它模塊，然後運行 npm run dev 就可以了，無需任何額外配置。後面我們會專門講一下 Laravel Mix 的各種使用，現在你只需要知道它是怎麽回事就好了。

Laravel Mix 的配置文件就是項目根目錄下的 webpack.mix.js：

const mix = require(‘laravel-mix‘);

mix.js(‘resources/js/app.js‘, ‘public/js‘)
   .sass(‘resources/sass/app.scss‘, ‘public/css‘);

目前，它非常之簡潔，從 node_modules 中引入 laravel-mix 庫，然後運用它提供的 js 和 sass 方法將 resources/js/app.js 編譯打包後輸出到 public/js/app.js，將 resources/sass/app.scss （Sass文件）編譯打包後輸出到 public/css/app.css：

這樣，我們就可以項目的前端文件下引入 /css/app.css 和 /js/app.js 使用 Bootstrap 提供的樣式和 JavaScript 組件了。後面我們將在多個地方基於 Bootstrap 實現前端 CSS 視覺效果優化。

Laravel 項目中使用 Bootstrap 框架