Webpack和绑定器

了解如何使用Webpack或其他捆绑程序将Bootstrap包含在项目中。

在本页面

安装 Bootstrap

使用npm安装Bootstrap作为Node.js模块。

导入 JavaScript

在应用程序入口添加以下行来导入 Bootstrap的 JavaScript （通常是 index.js 或 app.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.json 。使用 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'
      ]
    }
  ]
}
// ...