Webpack na vifurushi

Kufunga Bootstrap

Sakinisha bootstrap kama moduli ya Node.js kwa kutumia npm.

Inaleta JavaScript

Ingiza JavaScript ya Bootstrap kwa kuongeza laini hii kwenye sehemu ya kuingilia ya programu yako (kwa kawaida index.jsau app.js):

import 'bootstrap';

// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';

Vinginevyo, ikiwa unahitaji tu programu-jalizi zetu chache, unaweza kuagiza programu-jalizi kibinafsi kama inahitajika:

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

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

Bootstrap inategemea Popper , ambayo imeainishwa kwenye peerDependenciesmali. Hii inamaanisha kuwa itabidi uhakikishe kuiongeza kwenye package.jsonmatumizi yako npm install @popperjs/core.

Mitindo ya Kuagiza

Inaleta Sass Iliyoundwa Awali

Ili kufurahia uwezo kamili wa Bootstrap na kuibinafsisha kulingana na mahitaji yako, tumia faili chanzo kama sehemu ya mchakato wa kuunganisha mradi wako.

Kwanza, unda yako mwenyewe _custom.scssna uitumie kubatilisha anuwai maalum zilizojumuishwa . Kisha, tumia faili yako kuu ya Sass kuagiza anuwai zako maalum, ikifuatiwa na Bootstrap:

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

Ili Bootstrap ikusanye, hakikisha umesakinisha na kutumia vipakiaji vinavyohitajika: sass-loader , postcss-loader na Autoprefixer . Kwa usanidi mdogo, usanidi wako wa pakiti ya wavuti unapaswa kujumuisha sheria hii au sawa:

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

Inaleta CSS Iliyokusanywa

Vinginevyo, unaweza kutumia CSS ya Bootstrap iliyo tayari kutumia kwa kuongeza tu laini hii kwenye sehemu ya kuingilia ya mradi wako:

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

Katika kesi hii unaweza kutumia sheria yako iliyopo cssbila marekebisho yoyote maalum kwa usanidi wa pakiti za wavuti, isipokuwa hauitaji sass-loadertu style-loader na css-loader .

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