Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
in English

Pakiety internetowe i pakiety

Dowiedz się, jak włączyć Bootstrap do swojego projektu za pomocą Webpack lub innych pakietów.

Instalowanie Bootstrapa

Zainstaluj bootstrap jako moduł Node.js przy użyciu npm.

Importowanie JavaScript

Zaimportuj kod JavaScript Bootstrap, dodając ten wiersz do punktu wejścia aplikacji (zwykle index.jslub app.js):

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

Alternatywnie, jeśli potrzebujesz tylko kilku naszych wtyczek, możesz zaimportować wtyczki pojedynczo w razie potrzeby:

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

Bootstrap zależy od Poppera , który jest określony we peerDependencieswłaściwości. Oznacza to, że będziesz musiał dodać go do swojego package.jsonużytku npm install @popperjs/core.

Importowanie stylów

Importowanie prekompilowanego Sassa

Aby w pełni wykorzystać potencjał Bootstrap i dostosować go do swoich potrzeb, użyj plików źródłowych jako części procesu bundlingu projektu.

Najpierw utwórz własne _custom.scssi użyj go do zastąpienia wbudowanych zmiennych niestandardowych . Następnie użyj głównego pliku Sass, aby zaimportować zmienne niestandardowe, a następnie Bootstrap:

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

Aby Bootstrap się skompilował, upewnij się, że zainstalowałeś i używasz wymaganych programów ładujących: sass-loader , postcss-loader z Autoprefixer . Przy minimalnej konfiguracji konfiguracja pakietu internetowego powinna zawierać tę lub podobną regułę:

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

Importowanie skompilowanego CSS

Alternatywnie możesz użyć gotowego do użycia kodu CSS Bootstrap, po prostu dodając ten wiersz do punktu wejścia projektu:

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

W tym przypadku możesz użyć swojej istniejącej reguły cssbez żadnych specjalnych modyfikacji konfiguracji webpacka, z wyjątkiem tego, że nie potrzebujesz sass-loadertylko style-loader i css-loader .

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