Baakadaha shabakadda iyo xidhmooyinka

Ku rakibida Bootstrap

Ku rakib bootstrap sida moduleka Node.js adoo isticmaalaya npm.

Soo dejinta JavaScript

Soo deji Bootstrap JavaScript adiga oo ku dara khadkan barta laga soo galo abkaaga (sida caadiga ah index.jsama app.js):

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

Haddii kale, haddii aad u baahan tahay oo keliya dhowr ka mid ah pluginsyadayada, waxaad soo dejisan kartaa plugins si gaar ah haddii loo baahdo:

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

Bootstrap waxay kuxirantahay Popper , kaas oo lagu qeexay peerDependenciesguriga. Tani waxay ka dhigan tahay inaad hubiso inaad ku darto package.jsonisticmaalkaaga npm install @popperjs/core.

Soo dejinta Qaababka

Soo dejinta Sass la soo diyaariyay

Si aad ugu raaxaysato kartida buuxda ee Bootstrap oo aad u habaynayso baahiyahaaga, isticmaal faylasha isha qayb ka mid ah habka xidhidhiyaha mashruucaaga.

Marka hore, samee kaaga _custom.scssoo isticmaal si aad u tirtirto doorsoomayaasha caadadii ee ku dhex jira . Ka dib, isticmaal faylkaaga ugu weyn ee Sass si aad u soo dejiso doorsoomayaashaada gaarka ah, oo ay ku xigto Bootstrap:

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

Si Bootstrap loo ururiyo, hubi inaad rakibtay oo aad isticmaashid ralayaasha loo baahan yahay: sass-loader , postcss-loader oo leh Autoprefixer . Habaynta ugu yar, isku xidhka xidhxidhkaaga webka waa inuu ku jiraa xeerkan ama wax la mid ah:

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

Soo dejinta CSS la soo ururiyey

Haddii kale, waxaad isticmaali kartaa Bootstrap ee diyaarka u ah in la isticmaalo CSS adigoo si fudud ugu daraya khadkan barta laga soo galo mashruucaaga:

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

Xaaladdan oo kale waxaad u isticmaali kartaa qaanuunkaaga jira cssadigoon wax isbeddel gaar ah ku samayn habaynta xirmada webka, marka laga reebo inaadan u baahnayn sass-loaderkaliya -loader iyo css-loader .

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