Webpack en bundlers

Ynstallaasje fan Bootstrap

Ynstallearje bootstrap as in Node.js-module mei npm.

It ymportearjen fan JavaScript

Ymportearje Bootstrap's JavaScript troch dizze rigel ta te foegjen oan it yngongspunt fan jo app (normaal index.jsof app.js):

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

As alternatyf, as jo mar in pear fan ús plugins nedich binne, kinne jo plugins yndividueel ymportearje as nedich:

import Alert from 'bootstrap/js/dist/alert';
...

Bootstrap is ôfhinklik fan Popper , dat wurdt oantsjutte yn it peerDependenciespân. Dit betsjut dat jo derfoar soargje moatte dat jo it tafoegje oan jo package.jsongebrûk npm install @popperjs/core.

Ymportearje Styles

Ymportearje Precompiled Sass

Om it folsleine potensjeel fan Bootstrap te genietsjen en it oan te passen oan jo behoeften, brûk de boarnebestannen as ûnderdiel fan it bondelproses fan jo projekt.

Meitsje earst jo eigen en brûk it om de ynboude oanpaste fariabelen_custom.scss te oerskriuwen . Brûk dan jo haad Sass-bestân om jo oanpaste fariabelen te ymportearjen, folge troch Bootstrap:

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

Foar Bootstrap om te kompilearjen, soargje derfoar dat jo de fereaske loaders ynstallearje en brûke: sass-loader , postcss-loader mei Autoprefixer . Mei minimale opset moat jo webpack-konfiguraasje dizze regel as ferlykber befetsje:

// ...
{
  test: /\.(scss)$/,
  use: [{
    // inject CSS to page
    loader: 'style-loader'
  }, {
    // translates CSS into CommonJS modules
    loader: 'css-loader'
  }, {
    // Run postcss actions
    loader: 'postcss-loader',
    options: {
      // `postcssOptions` is needed for postcss 8.x;
      // if you use postcss 7.x skip the key
      postcssOptions: {
        // postcss plugins, can be exported to postcss.config.js
        plugins: function () {
          return [
            require('autoprefixer')
          ];
        }
      }
    }
  }, {
    // compiles Sass to CSS
    loader: 'sass-loader'
  }]
}
// ...

It ymportearjen fan kompilearre CSS

As alternatyf kinne jo Bootstrap's ready-to-use CSS brûke troch gewoan dizze rigel ta te foegjen oan it yngongspunt fan jo projekt:

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

Yn dit gefal meie jo jo besteande regel brûke foar csssûnder spesjale oanpassingen oan webpack-konfiguraasje, útsein dat jo net sass-loaderallinich style-loader en css-loader nedich binne .

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