Wɛbsaet a wɔde ahyɛ mu

Sua sɛnea wode Bootstrap bɛka wo project no ho denam Webpack so.

Bootstrap a wɔde bɛhyɛ mu

Install bootstrap sɛ Node.js module a wode npm di dwuma.

JavaScript a wɔde reba

Fa Bootstrap JavaScript no ba denam saa line yi a wode bɛka wo app no ​​entry point ho (mpɛn pii no index.jsanaa app.js):

import 'bootstrap';

Sɛnea ɛbɛyɛ a, wubetumi de plugins aba ankorankoro sɛnea ɛho hia:

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

Bootstrap gyina jQuery ne Popper , a wɔakyerɛ wɔ peerDependenciesagyapade no mu; eyi kyerɛ sɛ ɛsɛ sɛ wohwɛ hu sɛ wode abien no nyinaa bɛka nea wode package.jsonbedi dwuma npm install --save jquery popper.jsno ho .

Nneɛma a Wɔde Yɛ Nneɛma a Wɔde Ba Amannɔne

Sass a Wɔadi Kan Aboaboa Ano a Wɔde Reba

Sɛ wopɛ sɛ wonya Bootstrap tumi nyinaa mu anigye na wosakra no ma ɛne w’ahiade hyia a, fa source files no di dwuma sɛ wo project no bundling nhyehyɛe no fã.

Nea edi kan no, yɛ w’ankasa de _custom.scssna fa di dwuma fa built-in custom variables no so . Afei, fa wo Sass fael titiriw no fa wo custom variables no ba, na Bootstrap di akyi:

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

Sɛ Bootstrap bɛboaboa ano a, hwɛ hu sɛ wobɛhyehyɛ na wode loaders a ɛho hia no adi dwuma: sass-loader , postcss-loader a Autoprefixer ka ho. Sɛ wowɔ nhyehyɛe ketewaa bi a, ɛsɛ sɛ wo webpack config no de mmara yi anaa nea ɛte saa ka ho:

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

CSS a Wɔaboaboa Ano a Wɔde Reba

Sɛnea ɛbɛyɛ a, wubetumi de Bootstrap CSS a wɔasiesie sɛ wode bedi dwuma no adi dwuma denam saa nkyerɛwde yi a wode bɛka wo dwumadi no hyɛn gyinabea ho ara kwa no so:

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

Wɔ saa tebea yi mu no wubetumi de wo mmara a ɛwɔ hɔ dedaw no adi dwuma ama a nsakrae titiriw biara nni mu wɔ webpack config mu, gye sɛ csswunhia style-loader ne css-loader kɛkɛ .sass-loader

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