網頁包

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

安裝引導

導入 JavaScript

通過將此行添加到應用程序的入口點（通常是或）來導入Bootstrap 的 JavaScript：index.jsapp.js

import 'bootstrap';

或者，您可以根據需要單獨導入插件：

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

Bootstrap 依賴於屬性中指定的jQuery和Popper ；peerDependencies這意味著您必須確保將它們都添加到您的package.jsonusing 中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']
    }
  ]
}
...