Vefpakki og búntarar

Setur upp Bootstrap

Settu upp bootstrap sem Node.js mát með því að nota npm.

Flytur inn JavaScript

Flyttu inn JavaScript Bootstrap með því að bæta þessari línu við inngangspunkt forritsins þíns (venjulega index.jseða app.js):

import 'bootstrap';

// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';

Að öðrum kosti, ef þú þarft aðeins örfá af viðbótunum okkar, geturðu flutt inn viðbætur hver fyrir sig eftir þörfum:

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

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

Bootstrap fer eftir Popper , sem er tilgreint í peerDependencieseigninni. Þetta þýðir að þú verður að ganga úr skugga um að bæta því við package.jsonnotkun þína npm install @popperjs/core.

Flytja inn stíla

Flytur inn forsamsett Sass

Til að njóta allra möguleika Bootstrap og sérsníða það að þínum þörfum, notaðu frumskrárnar sem hluta af buntferli verkefnisins.

Fyrst skaltu búa til þína eigin _custom.scssog nota hana til að hnekkja innbyggðu sérsniðnu breytunum . Notaðu síðan aðal Sass skrána þína til að flytja inn sérsniðnar breytur þínar, fylgt eftir með Bootstrap:

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

Til að Bootstrap geti safnað saman, vertu viss um að setja upp og nota nauðsynlega hleðslutæki: sass-loader , postcss-loader með Autoprefixer . Með lágmarksuppsetningu ætti stillingar vefpakkans að innihalda þessa reglu eða svipað:

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

Flytur inn samsett CSS

Að öðrum kosti geturðu notað tilbúið CSS Bootstrap með því einfaldlega að bæta þessari línu við inngangspunkt verkefnisins þíns:

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

Í þessu tilfelli geturðu notað núverandi reglu fyrir cssán sérstakra breytinga á webpack config, nema þú þarft ekki sass-loaderbara style-loader og css-loader .

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