Webpack

Léiert wéi Dir Bootstrap an Ärem Projet mat Webpack 3 enthält.

Installéiert Bootstrap

Installéiert Bootstrap als Node.js Modul mat npm.

JavaScript importéieren

Importéiert Bootstrap's JavaScript andeems Dir dës Linn op den Entréespunkt vun Ärer App bäidréit (normalerweis index.jsoder app.js):

import 'bootstrap';

Alternativ kënnt Dir Plugins individuell importéieren wéi néideg:

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

Bootstrap ass ofhängeg vun jQuery a Popper , dës sinn definéiert als peerDependencies, dat heescht datt Dir musst sécher sinn, déi zwee op Äre package.jsonGebrauch ze addéieren npm install --save jquery popper.js.

Stiler importéieren

Prekompiléiert Sass importéieren

Fir dat vollt Potenzial vu Bootstrap ze genéissen an et op Är Bedierfnesser ze personaliséieren, benotzt d'Quelldateien als Deel vum Bündelprozess vun Ärem Projet.

Als éischt, erstellt Är eege _custom.scssa benotzt se fir déi agebaute personaliséiert Variablen ze iwwerschreiden . Dann benotzt Är Haapt Sass Datei fir Är personaliséiert Variabelen z'importéieren, gefollegt vu Bootstrap:

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

Fir Bootstrap ze kompiléieren, gitt sécher datt Dir déi erfuerderlech Loader installéiert a benotzt: sass-loader , postcss-loader mat Autoprefixer . Mat minimale Setup sollt Är Webpack Konfiguratioun dës Regel oder ähnlech enthalen:

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

Kompiléiert CSS importéieren

Alternativ kënnt Dir Bootstrap's prett-ze-benotzen CSS benotzen andeems Dir dës Linn einfach op den Entréespunkt vun Ärem Projet bäidréit:

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

An dësem Fall kënnt Dir Är existent Regel benotze fir cssouni speziell Ännerunge fir Webpack Config, ausser Dir braucht net sass-loaderjust Style-loader an css-loader .

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