Skip to main content Skip to docs navigation
View on GitHub

Webpack 和打包工具

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

安装 Bootstrap

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

导入(import) JavaScript 插件

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

import 'bootstrap';

// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';

另外,如果你只是需要某几个插件,你还可以根据需要 分别导入(import)独立的插件

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

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

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-loaderpostcss-loaderAutoprefixer。在最少的配置情况下,你的 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-loadercss-loader 即可。

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