Vefpakki

Lærðu hvernig á að hafa Bootstrap með í verkefninu þínu með því að nota Webpack 3.

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';

Að öðrum kosti geturðu flutt inn viðbætur hver fyrir sig eftir þörfum:

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

Bootstrap er háð jQuery og Popper , þau eru skilgreind sem peerDependencies, þetta þýðir að þú verður að passa að bæta þeim báðum við package.jsonnotkun þína npm install --save jquery popper.js.

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

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