Webpack ani bundlerw

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

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

O cogo kelen na, n’i mago bɛ an ka fɛnɲɛnɛma damadɔw dɔrɔn de la, i bɛ se ka fɛnɲɛnɛmaw ladon kelen-kelen i n’a fɔ a mago bɛ cogo min na:

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

Bootstrap bɛ da Popper kan , o min ɲɛfɔlen don peerDependenciesnafolo kɔnɔ. o kɔrɔ ye ko aw bɛna aw jija k' a fara aw ka package.jsonbaarakɛcogo npm install @popperjs/corekan .

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

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