Webpack fi bundlers jedhaman

Bootstrap fe'uu

Bootstrap akka moojuulii Node.js npm fayyadamuun fe'i.

JaavaScript galchuu

Sarara kana bakka seensaa appii keetii irratti dabaluudhaan JaavaScript Bootstrap galchi (yeroo baay'ee index.jsykn app.js):

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

Akkasumas, yoo plugins keenya muraasa qofa barbaaddan, akka barbaachisummaa isaatti plugins dhuunfaan galchuu dandeessu :

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

Bootstrap Popper irratti hundaa'a , kunis peerDependenciesqabeentaa keessatti ifteessame . package.jsonKana jechuun itti fayyadama kee irratti dabaluu kee mirkaneeffachuu qabda jechuudha npm install @popperjs/core.

Akkaataawwan Galchuu

Sass Dursee Qindaa'e Galchuu

Dandeettii guutuu Bootstrap fayyadamuu fi akka fedhii keessaniitti dhuunfachuuf, faayiloota madda akka qaama adeemsa bundling pirojektii keessaniitti fayyadami.

Jalqaba, kan kee uumi fi jijjiiramoota amala ijaaraman_custom.scss irra darbuuf itti fayyadami . Sana booda, jijjiiramoota amala kee galchuuf faayilii Sass kee isa guddaa fayyadami, itti aansuudhaan Bootstrap:

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

Bootstrap akka qindeessuuf, fe'itoota barbaachisoo ta'an fe'uu fi fayyadamuu kee mirkaneessi: sass-loader , postcss-loader with Autoprefixer . Saagi xiqqaadhaan, qindeessii webpack kee seera kana ykn kan kana fakkaatu of keessatti qabachuu qaba:

// ...
{
  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 Qindaa'e Galchuu

Akka filannootti, sarara kana bakka seensaa pirojektii keetii salphaatti dabaluudhaan CSS fayyadamuuf qophaa'aa Bootstrap fayyadamuu dandeessa:

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

Haala kana keessatti cssfooyya'iinsa addaa tokko malee qindeessaa webpack irratti seera kee isa jiru fayyadamuu dandeessa, style-loader fi css-loadersass-loader qofa si hin barbaachisu malee .

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