Webpack

Lær, hvordan du inkluderer Bootstrap i dit projekt ved hjælp af Webpack 3.

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

import 'bootstrap';

Alternativt kan du importere plugins individuelt efter behov:

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

Bootstrap er afhængig af jQuery og Popper , disse er defineret som peerDependencies, det betyder, at du skal sørge for at tilføje dem begge til din package.jsonbrug npm install --save jquery popper.js.

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 påkrævede indlæsere: sass-loader , postcss-loader med Autoprefixer . Med minimal opsætning bør din webpack-konfiguration indeholde denne regel eller lignende:

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

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 cssuden nogen specielle æ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']
      }
    ]
  }
  ...