Webpack ne nneɛma a wɔde ahyɛ mu

Bootstrap a wɔde 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';

// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';

Sɛnea ɛbɛyɛ a, sɛ wuhia yɛn plugins no kakraa bi pɛ a, wubetumi de plugins aba ankorankoro sɛnea ɛho hia:

import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';

Bootstrap gyina Popper , a wɔakyerɛ wɔ peerDependenciesagyapade no mu. Eyi kyerɛ sɛ ɛsɛ sɛ wohwɛ hu sɛ wode bɛka nea wode package.jsonbedi dwuma npm install @popperjs/coreno 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: [{
    // inject CSS to page
    loader: 'style-loader'
  }, {
    // translates CSS into CommonJS modules
    loader: 'css-loader'
  }, {
    // Run postcss actions
    loader: 'postcss-loader',
    options: {
      // `postcssOptions` is needed for postcss 8.x;
      // if you use postcss 7.x skip the key
      postcssOptions: {
        // postcss plugins, can be exported to postcss.config.js
        plugins: function () {
          return [
            require('autoprefixer')
          ];
        }
      }
    }
  }, {
    // compiles Sass to CSS
    loader: 'sass-loader'
  }]
}
// ...

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 line yi a wode bɛka wo project no hyɛn gyinabea no 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'
      ]
    }
  ]
}
// ...