Webpack 和打包器

了解如何使用 Webpack 或其他捆綁器將 Bootstrap 包含在您的項目中。

在本頁面

安裝引導

導入 JavaScript

通過將此行添加到應用程序的入口點（通常是或）來導入Bootstrap 的 JavaScript：index.jsapp.js

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

或者，如果您只需要我們的幾個插件，您可以根據需要單獨導入插件：

import Alert from 'bootstrap/js/dist/alert';
...

Bootstrap 依賴於屬性中指定的Popper 。peerDependencies這意味著您必須確保將其添加到您的package.jsonusing npm install @popperjs/core.

導入樣式

導入預編譯的 Sass

要充分利用 Bootstrap 的潛力並根據您的需要對其進行自定義，請將源文件用作項目捆綁過程的一部分。

首先，創建您自己的_custom.scss並使用它來覆蓋內置的自定義變量。然後，使用您的主 Sass 文件導入您的自定義變量，然後使用 Bootstrap：

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

要編譯 Bootstrap，請確保安裝並使用所需的加載器：sass-loader、postcss-loader和Autoprefixer。通過最少的設置，你的 webpack 配置應該包含這個規則或類似的：

// ...
{
  test: /\.(scss)$/,
  use: [{
    // inject CSS to page
    loader: 'style-loader'
  }, {
    // translates CSS into CommonJS modules
    loader: 'css-loader'
  }, {
    // Run postcss actions
    loader: 'postcss-loader',
    options: {
      // `postcssOptions` is needed for postcss 8.x;
      // if you use postcss 7.x skip the key
      postcssOptions: {
        // postcss plugins, can be exported to postcss.config.js
        plugins: function () {
          return [
            require('autoprefixer')
          ];
        }
      }
    }
  }, {
    // compiles Sass to CSS
    loader: 'sass-loader'
  }]
}
// ...

導入編譯好的 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'
      ]
    }
  ]
}
// ...