Веб-пакет и пакети

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

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

Увезување JavaScript

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

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

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

import Alert from 'bootstrap/js/dist/alert';
...

Bootstrap зависи од Popper , што е наведено во peerDependenciesимотот. Ова значи дека ќе мора да бидете сигурни дека ќе го додадете во вашето package.jsonкористење npm install @popperjs/core.

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

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

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

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

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

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

// ...
{
  test: /\.(scss)$/,
  use: [{
    // inject CSS to page
    loader: 'style-loader'
  }, {
    // translates CSS into CommonJS modules
    loader: 'css-loader'
  }, {
    // Run postcss actions
    loader: 'postcss-loader',
    options: {
      // `postcssOptions` is needed for postcss 8.x;
      // if you use postcss 7.x skip the key
      postcssOptions: {
        // postcss plugins, can be exported to postcss.config.js
        plugins: function () {
          return [
            require('autoprefixer')
          ];
        }
      }
    }
  }, {
    // compiles Sass to CSS
    loader: 'sass-loader'
  }]
}
// ...

Увоз на компајлиран 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'
      ]
    }
  ]
}
// ...