Pakiet internetowy

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

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/dropdown';
...

Bootstrap jest zależny od jQuery i Poppera , są one zdefiniowane jako peerDependencies, co oznacza , że będziesz musiał dodać oba z nich do swojego package.jsonużytku 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 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
    }]
  },
  ...

Importowanie skompilowanego CSS

Alternatywnie możesz użyć gotowego css Bootstrap, po prostu dodając tę ​​linię 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']
      }
    ]
  }
  ...