Webpack

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

安装引导程序

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

进口 Bootstrap的JavaScript 通过将此行添加到您应用的入口点（通常是 index.js or app.js ):

或者,您可以 分别导入插件 如所须：

引导程序取决于 jQuery的 and 波普尔在 peerDependencies 到你的 package.json 运用 npm install --save jquery popper.js.

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

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

为了使Bootstrap能够编译,请确保安装并使用所需的加载程序：萨斯装载机 , 后加载器 with 自动前缀。通过最少的设置,您的webpack配置应包含此规则或类似规则：

另外,您只需在项目的入口处添加以下行,即可使用Bootstrap的即用型CSS：

在这种情况下,您可以将现有规则用于 css 无需对webpack配置进行任何特殊修改,除非您不需要 sass-loader just 样式加载器 and CSS加载器 .