Webpak

Leer hoe om Bootstrap by jou projek in te sluit met Webpack 3.

Installeer Bootstrap

Installeer bootstrap as 'n Node.js-module deur npm te gebruik.

Invoer van JavaScript

Voer Bootstrap se JavaScript in deur hierdie reël by jou program se toegangspunt te voeg (gewoonlik index.jsof app.js):

import 'bootstrap';

Alternatiewelik kan u plugins individueel invoer soos nodig:

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

Bootstrap is afhanklik van jQuery en Popper , dit word gedefinieer as peerDependencies, dit beteken dat jy seker moet maak dat jy albei by jou package.jsongebruik voeg npm install --save jquery popper.js.

Invoer van style

Voer vooraf saamgestelde Sass in

Om die volle potensiaal van Bootstrap te geniet en dit aan te pas by jou behoeftes, gebruik die bronlêers as deel van jou projek se bundelingsproses.

Skep eers jou eie en gebruik dit om die ingeboude pasgemaakte veranderlikes_custom.scss te ignoreer . Gebruik dan jou hoof Sass-lêer om jou pasgemaakte veranderlikes in te voer, gevolg deur Bootstrap:

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

Vir Bootstrap om saam te stel, maak seker dat jy die vereiste laaiers installeer en gebruik: sass -loader , postcss-loader met Autoprefixer . Met minimale opstelling, moet jou webpack-opstelling hierdie reël of soortgelyk insluit:

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

Voer saamgestelde CSS in

Alternatiewelik kan jy Bootstrap se gereed-vir-gebruik CSS gebruik deur eenvoudig hierdie reël by jou projek se toegangspunt te voeg:

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

In hierdie geval kan jy jou bestaande reël gebruik csssonder enige spesiale wysigings aan webpack config, behalwe dat jy nie sass-loadernet style-loader en css-loader nodig het nie .

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