Webpack og bundlere

Installation af Bootstrap

Installer bootstrap som et Node.js-modul ved hjælp af npm.

Importerer JavaScript

Importer Bootstraps JavaScript ved at tilføje denne linje til din apps indgangspunkt (normalt index.jseller app.js):

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

Alternativt, hvis du kun har brug for nogle få af vores plugins, kan du importere plugins individuelt efter behov:

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

Bootstrap afhænger af Popper , som er specificeret i peerDependenciesegenskaben. Det betyder, at du skal sørge for at tilføje den til din package.jsonbrug npm install @popperjs/core.

Import af stilarter

Importerer prækompileret Sass

For at nyde det fulde potentiale af Bootstrap og tilpasse det til dine behov, skal du bruge kildefilerne som en del af dit projekts bundlingproces.

Først skal du oprette din egen _custom.scssog bruge den til at tilsidesætte de indbyggede tilpassede variabler . Brug derefter din primære Sass-fil til at importere dine tilpassede variabler efterfulgt af Bootstrap:

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

For at Bootstrap kan kompilere, skal du sørge for at installere og bruge de nødvendige loadere: sass-loader , postcss-loader med Autoprefixer . Med minimal opsætning bør din webpack-konfiguration inkludere denne regel eller lignende:

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

Importerer kompileret CSS

Alternativt kan du bruge Bootstraps klar til brug CSS ved blot at tilføje denne linje til dit projekts indgangspunkt:

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

I dette tilfælde kan du bruge din eksisterende regel til cssuden særlige ændringer til webpack-konfiguration, bortset fra at du ikke sass-loaderkun behøver style-loader og css-loader .

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