Source

網頁包

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

安裝引導

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

導入 JavaScript

通過將此行添加到應用程序的入口點(通常是或)來導入Bootstrap 的 JavaScriptindex.jsapp.js

import 'bootstrap';

或者,您可以根據需要單獨導入插件:

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

Bootstrap 依賴於jQueryPopper,它們被定義為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-loaderpostcss-loaderAutoprefixer。通過最少的設置,你的 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-loadercss-loader

  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
  ...