Pakiet internetowy

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

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):

import 'bootstrap';

Alternatywnie możesz importować wtyczki pojedynczo w razie potrzeby:

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

Bootstrap zależy od jQuery i Popper , które są określone we peerDependencieswłaściwości; oznacza to, że będziesz musiał dodać oba z nich do swojego package.jsonusing npm install --save jquery popper.js.

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: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

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