xirmo mareegaha

Baro sida loogu daro Bootstrap mashruucaaga adoo isticmaalaya Webpack 3.

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 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: [{
      loader: 'style-loader', // inject CSS to page
    }, {
      loader: 'css-loader', // translates CSS into CommonJS modules
    }, {
      loader: 'postcss-loader', // Run post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            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 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']
      }
    ]
  }
  ...