Webpack ya Internet

Yekola ndenge nini okoki kotia Bootstrap na projet na yo na nzela ya Webpack.

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):

import 'bootstrap';

Na lolenge mosusu, okoki kokɔtisa ba plugins mokomoko soki esengeli:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

Bootstrap ezali dépendant na jQuery na Popper , oyo e définir lokola peerDependencies, elingi koloba que il faudra osala sûr ya kobakisa bango mibale na usage na package.jsonyo npm install --save jquery popper.js.

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 biloko 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 sima, salelá fichier na yo ya Sass ya monene mpo na kokɔtisa ba variables na yo ya personnalisé, 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 configuration minimale, config na yo ya webpack esengeli ezala na mobeko oyo to oyo ekokani na yango:

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

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