Webpack le diphuthelwana

Go tsenya Bootstrap

Tsenya bootstrap bjalo ka modula wa Node.js o diriša npm.

Go tsenya JavaScript ka ntle

Tsenya JavaScript ya Bootstrap ka go tlaleletša mola wo ntlheng ya go tsena ya tirišo ya gago (gantši index.jsgoba app.js):

import 'bootstrap';

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

Ka go fapana le moo, ge e ba o nyaka feela di-plugin tše sego kae feela tša rena, o ka tsenya di-plugin ka botee ge go nyakega:

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

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

Bootstrap itšetlehile ka Popper , e leng e boletsoeng ka peerDependenciesthepa. Se se ra gore o tla swanelwa ke go kgonthiša gore o e tlaleletša go package.jsontšhomišo ya gago npm install @popperjs/core.

Go Tsenya Ditaele ka Ntle

Go tsenya ka ntle Sass yeo e kgobokeditšwego Pele

Go thabela bokgoni bjo bo tletšego bja Bootstrap le go e tlwaetša go ya ka dinyakwa tša gago, diriša difaele tša mothopo bjalo ka karolo ya tshepedišo ya go kgoboketša ya projeke ya gago.

Sa mathomo, hlama ya gago _custom.scssgomme o e šomiše go tloša diphetogo tša tlwaelo tše di agetšwego ka gare . Ka morago ga moo, šomiša faele ya gago ye kgolo ya Sass go tsenya diphetogo tša gago tša tlwaelo, gomme ya latelwa ke Bootstrap:

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

Bakeng sa Bootstrap go kgoboketša, kgonthiša gore o tsenya le go šomiša di-loader tše di nyakegago: sass-loader , postcss-loader ka Autoprefixer . Ka peakanyo ye nnyane, peakanyo ya gago ya webpack e swanetše go akaretša molao wo goba wo o swanago le ona:

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

Go tsenya ka ntle CSS ye e kgobokeditšwego

Ka go fapana le moo, o ka šomiša CSS ya Bootstrap yeo e loketšego go šomišwa ka go no oketša mola wo ntlheng ya go tsena ya projeke ya gago:

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

Tabeng ye o ka šomiša molao wa gago wo o lego gona bakeng sa cssntle le diphetogo tše di kgethegilego go webpack config, ntle le gore ga o hloke sass-loaderfeela style-loader le css-loader .

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