Веб пакет

Научете како да го вклучите Bootstrap во вашиот проект користејќи Webpack 3.

Инсталирање на Bootstrap

Инсталирајте bootstrap како модул Node.js користејќи npm.

Увезување JavaScript

Увезете го JavaScript на Bootstrap со додавање на оваа линија во влезната точка на вашата апликација (обично index.jsили app.js):

import 'bootstrap';

Алтернативно, можете да увезувате приклучоци поединечно по потреба:

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

Bootstrap зависи од jQuery и Popper , тие се дефинирани како peerDependencies, што значи дека ќе мора да бидете сигурни дека ќе ги додадете и двата во package.jsonкористењето npm install --save jquery popper.js.

Стилови за увоз

Увоз на претходно компајлиран Sass

За да уживате во целосниот потенцијал на Bootstrap и да го приспособите на вашите потреби, користете ги изворните датотеки како дел од процесот на здружување на вашиот проект.

Прво, креирајте свој _custom.scssи користете го за да ги отфрлите вградените сопствени променливи . Потоа, користете ја вашата главна датотека Sass за да ги увезете вашите сопствени променливи, проследени со Bootstrap:

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

За да може Bootstrap да се компајлира, погрижете се да ги инсталирате и користите потребните натоварувачи: sass-loader , postcss-loader со Autoprefixer . Со минимално поставување, конфигурацијата на вашиот веб-пакет треба да го содржи ова правило или слично:

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

Увоз на компајлиран CSS

Алтернативно, можете да ја користите подготвената за употреба CSS на Bootstrap со едноставно додавање на оваа линија во влезната точка на вашиот проект:

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

Во овој случај, можете да го користите вашето постоечко правило cssбез никакви посебни модификации на конфигурацијата на webpack, освен што не ви требаат sass-loaderсамо style-loader и css-loader .

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