Webpack

Jifunze jinsi ya kujumuisha Bootstrap katika mradi wako kwa kutumia Webpack 3.

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';

Vinginevyo, unaweza kuagiza programu-jalizi kibinafsi kama inahitajika:

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

Bootstrap inategemea jQuery na Popper , hizi zinafafanuliwa kama peerDependencies, hii inamaanisha kuwa itabidi uhakikishe kuwaongeza zote mbili kwa package.jsonmatumizi yako npm install --save jquery popper.js.

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: [{
      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
    }]
  },
  ...

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