Retpako

Lernu kiel inkludi Bootstrap en via projekto uzante Webpack 3.

Instalante Bootstrap

Instalu bootstrap kiel modulo Node.js uzante npm.

Importado de JavaScript

Importu la JavaScript de Bootstrap aldonante ĉi tiun linion al la enirpunkto de via aplikaĵo (kutime index.jsaŭ app.js):

import 'bootstrap';

Alternative, vi povas importi kromaĵojn individue laŭbezone:

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

Bootstrap dependas de jQuery kaj Popper , ĉi tiuj estas difinitaj kiel peerDependencies, tio signifas, ke vi devos certigi aldoni ambaŭ al via package.jsonuzado npm install --save jquery popper.js.

Importi Stilojn

Importi Antaŭkompilitan Sass

Por ĝui la plenan potencialon de Bootstrap kaj agordi ĝin laŭ viaj bezonoj, uzu la fontdosierojn kiel parton de la kunigprocezo de via projekto.

Unue, kreu vian propran _custom.scsskaj uzu ĝin por anstataŭi la enkonstruitajn kutimajn variablojn . Poste, uzu vian ĉefan Sass-dosieron por importi viajn kutimajn variablojn, sekvitajn de Bootstrap:

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

Por ke Bootstrap kompilu, certigu, ke vi instalu kaj uzu la bezonatajn ŝargilojn: sass-loader , postcss-loader kun Autoprefixer . Kun minimuma agordo, via retpaka agordo devus inkluzivi ĉi tiun regulon aŭ similan:

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

Importado de Kompilita CSS

Alternative, vi povas uzi la uzeblan CSS de Bootstrap simple aldonante ĉi tiun linion al la enirpunkto de via projekto:

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

En ĉi tiu kazo vi povas uzi vian ekzistantan regulon csssen specialaj modifoj al webpack config, krom vi ne bezonas sass-loadernur style-loader kaj css-loader .

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