打包工具

了解如何利用 Webpack 或其它打包工具将 Bootstrap 应用到项目中。

On this page

安装 Bootstrap

利用 npm 安装 bootstrap 并将其作为 Node.js 模块使用。

导入（import） JavaScript 插件

通过将以下代码添加到你的应用程序的入口文件中（通常是 index.js 或 app.js 文件）从而导入（import） Bootstrap 的 JavaScript 插件：

// 根据需要明确指定插件
import { Tooltip, Toast, Popover } from 'bootstrap';

另外，如果你只是需要某几个插件，你还可以根据需要 分别导入（import）独立的插件 ：

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

Bootstrap 依赖 Popper，该依赖项在 peerDependencies 属性中已经明确指定。 这意味着你必须确保使用 npm install @popperjs/core 命令将此依赖项添加到你的 package.json 文件中。

导入（import）样式

导入（import）预编译的 Sass

要充分发挥 Bootstrap 的潜能并根据需要对其进行定制，你需要将 Bootstrap 的源文件添加到你的项目的构建流程中。

首先，创建你自己的 _custom.scss 文件，并将其用于覆盖 Bootstrap 内置的可修改变量。然后，在你自己的 Sass 主文件中导入（import）该文件，最后导入 Bootstrap 主文件：

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

为了编译 Bootstrap，请确保安装并使用了编译 Bootstrap 所需的加载器（loader）： 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'
  }]
}
// ...

导入（import）编译后的 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'
      ]
    }
  ]
}
// ...
返回顶部