Webpack

Naučte se, jak zahrnout Bootstrap do vašeho projektu pomocí Webpacku 3.

Instalace Bootstrap

Nainstalujte bootstrap jako modul Node.js pomocí npm.

Import JavaScriptu

Importujte JavaScript Bootstrapu přidáním tohoto řádku do vstupního bodu aplikace (obvykle index.jsnebo app.js):

import 'bootstrap';

Případně můžete podle potřeby importovat pluginy jednotlivě :

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

Bootstrap je závislý na jQuery a Popper , ty jsou definovány jako peerDependencies, to znamená, že se budete muset ujistit, že je přidáte do svého package.jsonpoužívání oba npm install --save jquery popper.js.

Import stylů

Import předkompilovaného Sass

Chcete-li využít plný potenciál Bootstrapu a přizpůsobit jej svým potřebám, použijte zdrojové soubory jako součást procesu sdružování vašeho projektu.

Nejprve si vytvořte vlastní _custom.scssa použijte ji k přepsání vestavěných vlastních proměnných . Poté použijte svůj hlavní soubor sass k importu vlastních proměnných a poté Bootstrap:

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

Aby se Bootstrap zkompiloval, ujistěte se, že jste nainstalovali a používali požadované zavaděče: sass- loader , postcss-loader s Autoprefixerem . S minimálním nastavením by konfigurace vašeho webového balíčku měla obsahovat toto nebo podobné pravidlo:

  ...
  {
    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
    }]
  },
  ...

Import kompilovaného CSS

Případně můžete použít připravený css Bootstrap jednoduchým přidáním tohoto řádku do vstupního bodu vašeho projektu:

import 'bootstrap/dist/css/bootstrap.min.css';

V tomto případě můžete použít své stávající pravidlo pro cssbez jakýchkoli speciálních úprav konfigurace webpacku, kromě toho, že nepotřebujete sass-loaderpouze style-loader a css-loader .

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