Webpack

Disce quomodo includendi Bootstrap in project usura Webpack.

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 ab Query et Popper , quae peerDependenciesproprietatis specificatae sunt; hoc significat quod fac ut utrumque addas ad package.jsonusum tuum 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 partem processus fasciculi incepti 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 inquisitis: sass- onerator , postcss- onerator cum autopraefixore . Cum minimam paroeciam, webpack aboutconfig tuus 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 postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          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']
    }
  ]
}
...