Webpack ye

Aw ye Bootstrap doncogo dɔn aw ka porozɛ kɔnɔ ni Webpack ye.

Bootstrap sigili

Bootstrap sigi sen kan i n’a fɔ Node.js modulu ni npm ye.

JavaScript min bɛ don jamana kɔnɔ

Bootstrap ka JavaScript ladon ni nin layini in farali ye i ka porogaramu don yɔrɔ la (a ka c’a la index.jswalima app.js):

import 'bootstrap';

O cogo kelen na, i bɛ se ka plugins (plugin) ladon kelen-kelen i n’a fɔ a mago bɛ cogo min na:

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

Bootstrap bɛ tali kɛ jQuery ani Popper , minnu ɲɛfɔlen don peerDependenciesnafolo kɔnɔ; o kɔrɔ ye ko aw bɛna aw jija k' u fila bɛɛ fara aw ka package.jsonbaarakɛcogo npm install --save jquery popper.jskan .

Importation (Stiliw) ka don jamana kɔnɔ

Importing Sass min labɛnna ka kɔn

Walasa ka Bootstrap seko bɛɛ diyabɔ ani k’a kɛ ka kɛɲɛ n’i magow ye, baara kɛ ni source files ye i n’a fɔ i ka poroze ka bundling process dɔ.

Fɔlɔ, i yɛrɛ ta dabɔ _custom.scssani ka baara kɛ n’a ye walasa ka ladamu fɛn caman sɛgɛsɛgɛli kɛ . O kɔfɛ, baara kɛ ni i ka Sass filenba ye walasa k’i ka ladamu fɛn caman sɛgɛsɛgɛli kɛ, o kɔfɛ Bootstrap:

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

Walasa Bootstrap ka se ka dalajɛ, aw ye aw jija ka doni-minɛnw sigi sen kan ani ka baara kɛ ni u ye: sass-loader , postcss-loader ni Autoprefixer . Ni sigicogo fitinin ye, i ka webpack config ka kan ka nin sariya in walima a ɲɔgɔnnaw don a kɔnɔ:

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

CSS lajɛlenw doncogo

O cogo kelen na, i bɛ se ka baara kɛ ni Bootstrap ka CSS labɛnnen ye baara kama ni i ye nin layini in fara dɔrɔn i ka porozɛ donyɔrɔ kan:

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

O cogo la i bɛ se ka baara kɛ n’i ka sariya kɔrɔ ye for cssk’a sɔrɔ i ma fɛn kɛrɛnkɛrɛnnenw sɛmɛntiya webpack config kan, fo n’i mago tɛ sass-loaderstyle -loader ni css-loader dɔrɔn na.

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