Webpack da daure

Sanya Bootstrap

Sanya bootstrap azaman ƙirar Node.js ta amfani da npm.

Ana shigo da JavaScript

Shigo da Bootstrap's JavaScript ta ƙara wannan layin zuwa wurin shigarwar ka (yawanci index.jsko app.js):

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

A madadin, idan kuna buƙatar kaɗan daga cikin plugins ɗin mu kawai, kuna iya shigo da plugins daban-daban kamar yadda ake buƙata:

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

Bootstrap ya dogara da Popper , wanda aka ƙayyade a cikin peerDependenciesdukiya. Wannan yana nufin cewa dole ne ku tabbatar kun ƙara shi zuwa package.jsonamfani da ku npm install @popperjs/core.

Ana shigo da Salon

Ana shigo da Sass da aka riga aka tattara

Don jin daɗin cikakkiyar damar Bootstrap da keɓance shi ga buƙatunku, yi amfani da fayilolin tushen azaman wani ɓangare na tsarin haɗa aikin ku.

Da farko, ƙirƙiri naku _custom.scsskuma yi amfani da shi don ƙetare ginanniyar masu canji na al'ada . Sannan, yi amfani da babban fayil ɗin Sass ɗinku don shigo da masu canjin al'ada, sannan Bootstrap ya biyo baya:

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

Don Bootstrap don haɗawa, tabbatar da shigar da amfani da masu ɗaukar kaya da ake buƙata: sass-loader , mai ɗaukar hoto tare da Autoprefixer . Tare da ƙaramin saiti, saitin fakitin gidan yanar gizonku yakamata ya haɗa da wannan doka ko makamancin haka:

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

Ana Shigo da Haɗaɗɗen CSS

A madadin, zaku iya amfani da Bootstrap na shirye-shiryen amfani da CSS ta hanyar ƙara wannan layi kawai zuwa wurin shigarwar aikin ku:

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

A wannan yanayin zaku iya amfani da ƙa'idar da kuke da ita don cssba tare da wani gyare-gyare na musamman ga saitin fakitin gidan yanar gizo ba, sai dai ba kwa buƙatar sass-loaderkawai mai ɗaukar hoto da css-loader .

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