Webpack ndi ma bundlers

Kukhazikitsa Bootstrap

Ikani bootstrap ngati gawo la Node.js pogwiritsa ntchito npm.

Kulowetsa JavaScript

Lowetsani JavaScript ya Bootstrap powonjezera mzerewu kumalo olowera pulogalamu yanu (nthawi zambiri index.jskapena app.js):

import 'bootstrap';

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

Kapenanso, ngati mungofuna mapulagini athu ochepa, mutha kuitanitsa mapulagini payekhapayekha ngati pakufunika:

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

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

Bootstrap imadalira Popper , yomwe imatchulidwa mu peerDependencieskatunduyo. Izi zikutanthauza kuti muyenera kuonetsetsa kuti mukuwonjezera pazomwe mukugwiritsa package.jsonntchito npm install @popperjs/core.

Masitayelo Olowetsa

Kulowetsa Precompiled Sass

Kuti musangalale ndi kuthekera konse kwa Bootstrap ndikusintha makonda anu kuti agwirizane ndi zosowa zanu, gwiritsani ntchito mafayilo oyambira ngati gawo lakusanjikiza kwa polojekiti yanu.

Choyamba, pangani zanu ndikuzigwiritsa _custom.scssntchito kuti muwongolere zosintha zomwe zakhazikitsidwa . Kenako, gwiritsani ntchito fayilo yanu yayikulu ya Sass kuti mulowetse zosintha zanu, zotsatiridwa ndi Bootstrap:

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

Kuti Bootstrap isankhidwe, onetsetsani kuti mwayika ndikugwiritsa ntchito zonyamula zofunika: sass-loader , postcss-loader ndi Autoprefixer . Pokhazikitsa pang'ono, kasinthidwe katsamba lanu katsamba kayenera kukhala ndi lamulo ili kapena zofananira:

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

Kulowetsa CSS Yophatikizidwa

Kapenanso, mutha kugwiritsa ntchito CSS yokonzeka kugwiritsa ntchito ya Bootstrap pongowonjezera mzerewu kumalo olowera polojekiti yanu:

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

Apa mutha kugwiritsa ntchito lamulo lanu lomwe lidalipo csspopanda zosintha zapadera pakusintha kwapapaketi, kupatula ngati simungofunika kuyika sass-loaderstyle -loader ndi css-loader .

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