Wɛbsaet a wɔde ahyɛ mu

Sua sɛnea wode Bootstrap bɛka wo project no ho denam Webpack 3 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/dropdown';
...

Bootstrap gyina jQuery ne Popper so , wɔkyerɛkyerɛ eyinom mu sɛ peerDependencies, eyi kyerɛ sɛ ɛsɛ sɛ wohwɛ hu sɛ wode abien no nyinaa bɛka wo package.jsondwumadie npm install --save jquery popper.jsho .

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

CSS a Wɔaboaboa Ano a Wɔde Reba

Sɛnea ɛbɛyɛ a, wubetumi de Bootstrap no 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']
      }
    ]
  }
  ...