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/alert';
...

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 ut tuam consuetudinem variabilium importet, quam 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, CSS Bootstrap uti licet, hanc lineam simpliciter addendo ad punctum ingressum propositi:

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

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

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