Webpack na ba bundlers

Kokɔtisa Bootstrap

Botia bootstrap lokola module ya Node.js na kosalelaka npm.

Kokɔtisa JavaScript na kati

Importer JavaScript ya Bootstrap na kobakisa ligne oyo na point d'entrée ya app na yo (mbala mingi index.jsto app.js):

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

Na lolenge mosusu, soki ozali na mposa kaka ya mwa ba plugins na biso, okoki kokɔtisa ba plugins mokomoko soki esengeli:

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

Bootstrap etali Popper , oyo elakisami na peerDependenciespropriété. Yango elingi koloba ete ekosɛnga osala nyonso mpo obakisa yango na ndenge oyo ozali package.jsonkosalela npm install @popperjs/core.

Kokɔtisa Ba Style

Kokɔtisa Sass oyo esalemi liboso

Mpo na kosepela na makoki nyonso ya Bootstrap mpe kosala yango na kotalela bamposa na yo, salelá bafichiers ya source lokola eteni ya mosala ya kosangisa ya mosala na yo.

Ya liboso, salá oyo ya yo moko _custom.scssmpe salelá yango mpo na koboya ba variables personnalisées oyo etongami na kati . Na nsima, salelá fisyé na yo ya ntina mingi ya Sass mpo na kokɔtisa ba variables na yo oyo olingi kosala, na nsima Bootstrap:

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

Mpo Bootstrap e compiler, sala que o installer pe osalela ba chargeurs oyo esengeli: sass-loader , postcss-loader na Autoprefixer . Na setup minimal, config na yo ya webpack esengeli kozala na mobeko oyo to ya ndenge wana:

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

Kokɔtisa CSS oyo esangisami

Na lolenge mosusu, okoki kosalela CSS ya Bootstrap oyo ezali prêt à utiliser na kobakisa kaka ligne oyo na point d'entrée ya projet na yo:

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

Na cas oyo okoki kosalela mobeko na yo oyo ezali mpo na csskozanga mbongwana ya sipesiale na webpack config, longola kaka ete ozali na mposa ya sass-loaderkaka style-loader mpe css-loader te .

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