Webpack

瞭解如何使用 Webpack 將 Bootstrap 納入您的專案。

安裝 Bootstrap

使用 npm 將安裝 bootstrap 為 Node.js 模組。

匯入 JavaScript

匯入 Bootstrap 的 JavaScript，方法是將此程式碼行新增至您的應用程式進入點 (通常為 index.js 或 app.js)

import 'bootstrap';

或者，您也可以根據需要個別匯入外掛程式

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

Bootstrap 相依於 jQuery 和 Popper，這些相依性會在 peerDependencies 屬性中指定；這表示您必須使用 npm install --save jquery popper.js 將兩者都新增至您的 package.json。

匯入樣式

匯入預編譯 Sass

若要充分發揮 Bootstrap 的潛力並根據您的需求自訂 Bootstrap，請將原始檔案作為專案綑綁處理程序的一部分。

首先，建立您自己的 _custom.scss 並使用它來覆寫內建自訂變數。然後，使用您的主要 Sass 檔案來匯入您的自訂變數，接著匯入 Bootstrap

@import "custom";
@import "~bootstrap/scss/bootstrap";

若要編譯 Bootstrap，請務必安裝並使用必要的載入程式： sass-loader、postcss-loader 搭配 Autoprefixer。在最少設定下，您的 webpack 設定應包含此規則或類似規則

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

匯入編譯後的 CSS

或者，您只要將此行新增到專案的進入點，即可使用 Bootstrap 的現成 CSS

import 'bootstrap/dist/css/bootstrap.min.css';

在此情況下，您可以使用現有的 css 規則，而無需對 webpack 設定進行任何特殊修改，但您不需要 sass-loader，只需要 style-loader 和 css-loader。

...
module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}
...