Webpak en bundelers

Installeer Bootstrap

Installeer bootstrap as 'n Node.js-module deur npm te gebruik.

Invoer van JavaScript

Voer Bootstrap se JavaScript in deur hierdie reël by jou program se toegangspunt te voeg (gewoonlik index.jsof app.js):

import 'bootstrap';

// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';

Alternatiewelik, as jy net 'n paar van ons inproppe benodig, kan jy inproppe individueel invoer soos nodig:

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

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

Bootstrap hang af van Popper , wat in die peerDependencieseiendom gespesifiseer word. Dit beteken dat jy seker moet maak om dit by jou package.jsongebruik te voeg npm install @popperjs/core.

Invoer van style

Voer vooraf saamgestelde Sass in

Om die volle potensiaal van Bootstrap te geniet en dit aan te pas by jou behoeftes, gebruik die bronlêers as deel van jou projek se bundelingsproses.

Skep eers jou eie en gebruik dit om die ingeboude pasgemaakte veranderlikes_custom.scss te ignoreer . Gebruik dan jou hoof Sass-lêer om jou pasgemaakte veranderlikes in te voer, gevolg deur Bootstrap:

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

Vir Bootstrap om saam te stel, maak seker dat jy die vereiste laaiers installeer en gebruik: sass -loader , postcss-loader met Autoprefixer . Met minimale opstelling, moet jou webpack-opstelling hierdie reël of soortgelyk insluit:

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

Voer saamgestelde CSS in

Alternatiewelik kan jy Bootstrap se gereed-vir-gebruik CSS gebruik deur eenvoudig hierdie reël by jou projek se toegangspunt te voeg:

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

In hierdie geval kan jy jou bestaande reël gebruik csssonder enige spesiale wysigings aan webpack config, behalwe dat jy nie sass-loadernet style-loader en css-loader nodig het nie .

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