Webpack

Learje hoe't jo Bootstrap opnimme yn jo projekt mei Webpack 3.

Ynstallaasje fan Bootstrap

Ynstallearje bootstrap as in Node.js-module mei npm.

It ymportearjen fan JavaScript

Ymportearje Bootstrap's JavaScript troch dizze rigel ta te foegjen oan it yngongspunt fan jo app (normaal index.jsof app.js):

import 'bootstrap';

As alternatyf kinne jo plugins yndividueel ymportearje as nedich:

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

Bootstrap is ôfhinklik fan jQuery en Popper , dizze wurde definiearre as peerDependencies, dit betsjut dat jo der wis fan wêze moatte dat jo beide tafoegje oan jo package.jsongebrûk npm install --save jquery popper.js.

Ymportearje Styles

Ymportearje Precompiled Sass

Om it folsleine potensjeel fan Bootstrap te genietsjen en it oan te passen oan jo behoeften, brûk de boarnebestannen as ûnderdiel fan it bondelproses fan jo projekt.

Meitsje earst jo eigen en brûk it om de ynboude oanpaste fariabelen_custom.scss te oerskriuwen . Brûk dan jo haad sass-bestân om jo oanpaste fariabelen te ymportearjen, folge troch Bootstrap:

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

Foar Bootstrap om te kompilearjen, soargje derfoar dat jo de fereaske loaders ynstallearje en brûke: sass-loader , postcss-loader mei Autoprefixer . Mei minimale opset moat jo webpack-konfiguraasje dizze regel as ferlykber befetsje:

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

It ymportearjen fan kompilearre CSS

As alternatyf kinne jo Bootstrap's ready-to-use css brûke troch gewoan dizze rigel ta te foegjen oan it yngongspunt fan jo projekt:

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

Yn dit gefal kinne jo jo besteande regel brûke foar csssûnder spesjale oanpassingen oan webpack-konfiguraasje, útsein dat jo net sass-loadergewoan styl-loader en css-loader nedich binne .

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