Webpack

Sužinokite, kaip įtraukti Bootstrap į savo projektą naudodami Webpack 3.

„Bootstrap“ diegimas

Įdiekite bootstrap kaip Node.js modulį naudodami npm.

„JavaScript“ importavimas

Importuokite „Bootstrap“ „JavaScript “ pridėdami šią eilutę prie programos įvesties taško (paprastai index.jsarba app.js):

import 'bootstrap';

Arba, jei reikia, galite importuoti papildinius atskirai :

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

„Bootstrap“ priklauso nuo „ jQuery “ ir „ Popper “, jie apibrėžiami kaip peerDependencies, tai reiškia, kad turėsite juos abu įtraukti į savo package.jsonnaudojimą npm install --save jquery popper.js.

Stilių importavimas

Importuojamas iš anksto sudarytas Sass

Norėdami pasinaudoti visomis „Bootstrap“ galimybėmis ir pritaikyti ją savo poreikiams, naudokite šaltinio failus kaip projekto susiejimo proceso dalį.

Pirmiausia sukurkite savo _custom.scssir naudokite jį, kad nepaisytumėte integruotų tinkintų kintamųjų . Tada naudokite pagrindinį Sass failą, kad importuotumėte pasirinktinius kintamuosius, o po to - Bootstrap:

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

Kad „Bootstrap“ kompiliuotų, įsitikinkite, kad įdiegėte ir naudojate reikiamus įkroviklius: sass-loader , postcss-loader su Autoprefixer . Su minimalia sąranka jūsų žiniatinklio paketo konfigūracija turėtų apimti šią ar panašią taisyklę:

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

Sukompiliuoto CSS importavimas

Arba galite naudoti paruoštą naudoti Bootstrap CSS, tiesiog pridėdami šią eilutę prie projekto įvesties taško:

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

Tokiu atveju galite naudoti esamą taisyklę cssbe jokių specialių žiniatinklio paketo konfigūracijos pakeitimų, išskyrus atvejus, kai jums reikia sass-loadertik stiliaus įkėlimo ir css-kroviklio .

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