Webpack

了解如何使用Webpack在项目中包含Bootstrap。

安装 Bootstrap

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

导入 JavaScript

导入 Bootstrap’s JavaScript ,方法是将以下行添加到应用的入口点(通常是 index.js 或者 app.js):

import 'bootstrap';

另外,您可以根据需要**“单独导入插件(import plugins individually)” **:

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

Bootstrap 依赖 jQueryPopper, 在peerDependencies中指定的属性; 这意味着您必须确保将它们都添加 使用npm install --save jquery popper.jspackage.json

导入样式表(Styles)

导入预编译的Sass

要充分发挥Bootstrap的潜力并根据需要对其进行自定义,请将源文件用作项目捆绑过程的一部分。

首先,创建自己的_custom.scss并将其用于覆盖[内置自定义变量]built-in custom variables。 然后,使用您的主Sass文件导入您的自定义变量,然后导入Bootstrap:

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

为了使Bootstrap编译,请确保安装并使用所需的加载程序: sass-loader, postcss-loader with 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
  }]
},
...

导入编译的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']
    }
  ]
}
...