xirmo mareegaha

Baro sida loogu daro Bootstrap mashruucaaga addoo isticmaalaya Webpack.

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

import 'bootstrap';

Haddii kale, waxaad soo dejisan kartaa plugins si gaar ah haddii loo baahdo:

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

Bootstrap waxay ku xiran tahay jQuery iyo Popper , kuwaas waxaa lagu qeexay sida peerDependencies, tani waxay la macno tahay inaad hubiso inaad ku darto labadaba package.jsonisticmaalkaaga npm install --save jquery popper.js.

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 ay Bootstrap u ururiso, hubi inaad rakibtay oo aad isticmaasho rarayayaasha 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: [{
    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
  }]
},
...

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 adiga oo cssaan wax isbeddel gaar ah ku samayn habaynta xirmada webka, marka laga reebo uma baahnid sass-loaderkaliya style-loader iyo css-loader .

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