打包工具

了解如何利用 Webpack 或其它打包工具將 Bootstrap 應(yīng)用到項目中。

On this page

安裝 Bootstrap

利用 npm 安裝 bootstrap 并將其作為 Node.js 模塊使用。

導(dǎo)入（import） JavaScript 插件

通過將以下代碼添加到你的應(yīng)用程序的入口文件中（通常是 index.js 或 app.js 文件）從而導(dǎo)入（import） Bootstrap 的 JavaScript 插件：

// 根據(jù)需要明確指定插件
import { Tooltip, Toast, Popover } from 'bootstrap';

另外，如果你只是需要某幾個插件，你還可以根據(jù)需要 分別導(dǎo)入（import）獨立的插件 ：

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

Bootstrap 依賴 Popper，該依賴項在 peerDependencies 屬性中已經(jīng)明確指定。這意味著你必須確保使用 npm install @popperjs/core 命令將此依賴項添加到你的 package.json 文件中。

導(dǎo)入（import）樣式

導(dǎo)入（import）預(yù)編譯的 Sass

要充分發(fā)揮 Bootstrap 的潛能并根據(jù)需要對其進行定制，你需要將 Bootstrap 的源文件添加到你的項目的構(gòu)建流程中。

首先，創(chuàng)建你自己的 _custom.scss 文件，并將其用于覆蓋 Bootstrap 內(nèi)置的可修改變量。然后，在你自己的 Sass 主文件中導(dǎo)入（import）該文件，最后導(dǎo)入 Bootstrap 主文件：

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

為了編譯 Bootstrap，請確保安裝并使用了編譯 Bootstrap 所需的加載器（loader）： sass-loader、postcss-loader 和 Autoprefixer。在最少的配置情況下，你的 webpack 配置文件應(yīng)當包含類似下面的規(guī)則：

// ...
{
  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'
  }]
}
// ...

導(dǎo)入（import）編譯后的 CSS 文件

另外，你還可以將以下代碼行添加到項目的入口文件中從而直接使用 Bootstrap 的現(xiàn)成的 CSS 文件：

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

在這種情況下，你可以直接使用現(xiàn)有的針對 css 文件的規(guī)則，從而無需對 webpack 的配置文件做任何特殊的修改。并且，你不再需要 sass-loader，只需 style-loader 和 css-loader 即可。

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