Akwatin gidan yanar gizo

Koyi yadda ake haɗa Bootstrap a cikin aikin ku ta amfani da Webpack 3.

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

import 'bootstrap';

A madadin, zaku iya shigo da plugins daban-daban kamar yadda ake buƙata:

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

Bootstrap ya dogara da jQuery da Popper , waɗannan an ayyana su azaman peerDependencies, wannan yana nufin cewa dole ne ku tabbatar kun ƙara duka biyun zuwa package.jsonamfani da ku npm install --save jquery popper.js.

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

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