Source

網頁包

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

安裝引導

使用 npm將引導程序安裝為 Node.js 模塊。

導入 JavaScript

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

import 'bootstrap';

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

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

Bootstrap 依賴於jQuery和Popper，它們被定義為peerDependencies，這意味著你必須確保將它們都添加到你的package.jsonusing 中npm install --save jquery popper.js。

請注意，如果您選擇單獨導入插件，則還必須安裝export-loader

導入樣式

導入預編譯的 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 post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            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']
      }
    ]
  }
  ...