Webpack

Disce quomodo includendi Bootstrap in project usura Webpack III.

installing Bootstrap

Install bootstrap ut Node.js moduli utens npm.

Importat JavaScript

Import Bootstrap scriptor JavaScript addendo hanc lineam ad punctum ingressum app ( index.jsvel plerumque app.js);

import 'bootstrap';

Vel, plugins singulatim prout opus est importare;

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

Bootstrap dependet a jQuery et Popper , haec definiuntur peerDependencies, hoc significat quod fac ut utrumque eorum ad package.jsonusum tuum addere debeas npm install --save jquery popper.js.

Importat Styles

Inferentes Precompiled Sass

Ad plenam potentiam Bootstrap fruendam et ad necessitates tuas customize, fasciculis fons utere ut pars processus fasciculi propositi tui.

Primum, fac tuum _custom.scsset utere ad variabilium consuetudinem aedificatorum delendi . Tum, fasciculo sass principali utere ad tuam consuetudinem variabilium importandam, sequitur Bootstrap:

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

Pro Bootstrap compilare, fac te installare et utere oneribus debitis: sass- onerator , postcss- onerator cum autopraefixore . Cum minimam paroeciam, webpack aboutconfig tuum hanc regulam vel similem includere debet:

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

Importat Composuit CSS

Vel, Bootstrap uti promptum css uti possis, hanc lineam simpliciter addendo ad punctum inceptum tuum:

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

Hoc in casu regulam tuam existentem potes uti csssine ullis modificationibus specialibus ad webpack config nisi non indiges sass-loadermodo stylo oneratus et css-loader .

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