Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
in English

Tīmekļa pakotne un komplektētāji

Uzziniet, kā iekļaut Bootstrap savā projektā, izmantojot Webpack vai citus komplektētājus.

Bootstrap instalēšana

Instalējiet bootstrap kā moduli Node.js, izmantojot npm.

JavaScript importēšana

Importējiet Bootstrap JavaScript , pievienojot šo rindiņu savas lietotnes ievades punktam (parasti index.jsvai app.js):

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

Alternatīvi, ja jums ir nepieciešami tikai daži no mūsu spraudņiem, varat importēt spraudņus atsevišķi pēc vajadzības:

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

Bootstrap ir atkarīgs no Popper , kas ir norādīts peerDependenciesīpašumā. Tas nozīmē, ka jums tas noteikti būs jāpievieno savam package.jsonlietojumam npm install @popperjs/core.

Stilu importēšana

Iepriekš kompilētā Sass importēšana

Lai pilnībā izmantotu Bootstrap potenciālu un pielāgotu to savām vajadzībām, izmantojiet avota failus kā daļu no sava projekta komplektēšanas procesa.

Vispirms izveidojiet savu _custom.scssun izmantojiet to, lai ignorētu iebūvētos pielāgotos mainīgos . Pēc tam izmantojiet savu galveno Sass failu, lai importētu pielāgotos mainīgos, kam seko Bootstrap:

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

Lai Bootstrap varētu kompilēt, noteikti instalējiet un izmantojiet nepieciešamos ielādētājus: sass-loader , postcss-loader ar Autoprefixer . Ar minimālu iestatīšanu tīmekļa pakotnes konfigurācijā ir jāietver šis noteikums vai līdzīgs noteikums:

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

Kompilētā CSS importēšana

Varat arī izmantot Bootstrap lietošanai gatavu CSS, vienkārši pievienojot šo rindiņu sava projekta ievades punktam:

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

Šajā gadījumā jūs varat izmantot esošo noteikumu cssbez īpašām izmaiņām tīmekļa pakotnes konfigurācijā, izņemot to, ka jums nav nepieciešams sass-loadertikai stila ielādētājs un css-loader .

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