View on GitHub

Webpack

了解如何利用 Webpack 将 Bootstrap 应用到项目中。

安装 Bootstrap

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

导入（import） JavaScript 插件

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

import 'bootstrap';

另外，你还可以根据需要 分别导入（import）独立的插件 ：

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

Bootstrap 依赖 jQuery 和 Popper，这两个依赖项在 peerDependencies 属性中已经明确指定。这意味着你必须确保使用 npm install --save jquery popper.js 命令将这两个依赖项添加到你的 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: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

导入（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']
    }
  ]
}
...