何使用Webpack在项目中包含Bootstrap

Webpack

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

安装引导程序

使用npm 将引导程序安装为Node.js模块。

导入JavaScript

通过Bootstrap的JavaScript来添加(index.js or app.js)

import 'bootstrap';

或者，您可以根据需要分别导入插件：

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

Bootstrap取决于在属性中指定的jQuery和Popper peerDependencies。这意味着您必须确保将它们都添加到您的package.json并且使用npm install --save jquery popper.js。

导入样式

导入预编译的SASS

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

首先，创建自己的_custom.scss并使用它覆盖内置的自定义变量。然后，使用您的主Sass文件导入您的自定义变量，然后导入Bootstrap：

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

为了使Bootstrap能够编译，请确保安装并使用所需的装载程序：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
  }]
},
...

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