Webpack thiab bundleers

Txhim kho Bootstrap

Nruab bootstrap raws li Node.js module siv npm.

Importing JavaScript

Ntshuam Bootstrap's JavaScript los ntawm kev ntxiv cov kab no rau koj lub app nkag nkag (feem ntau index.jslossis app.js):

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

Xwb, yog tias koj tsuas xav tau ob peb lub plugins xwb, koj tuaj yeem import plugins ib tus zuj zus raws li xav tau:

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

Bootstrap nyob ntawm Popper , uas tau teev tseg hauv cov peerDependenciescuab yeej. Qhov no txhais tau hais tias koj yuav tau ua kom paub tseeb tias yuav ntxiv nws rau koj package.jsonsiv npm install @popperjs/core.

Importing Styles

Importing Precompiled Sass

Txhawm rau txaus siab rau tag nrho cov peev txheej ntawm Bootstrap thiab kho nws rau koj cov kev xav tau, siv cov ntaub ntawv los ua ib feem ntawm koj qhov project bundling txheej txheem.

Ua ntej, tsim koj tus kheej _custom.scssthiab siv nws los hla cov kev hloov pauv hauv kev cai . Tom qab ntawd, siv koj cov ntaub ntawv Sass tseem ceeb los import koj cov kev cai hloov pauv, ua raws li Bootstrap:

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

Rau Bootstrap los sau ua ke, nco ntsoov tias koj nruab thiab siv cov loaders xav tau: sass-loader , postcss-loader nrog Autoprefixer . Nrog kev teeb tsa tsawg, koj lub webpack config yuav tsum suav nrog txoj cai no lossis zoo sib xws:

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

Importing Compiled CSS

Xwb, koj tuaj yeem siv Bootstrap's npaj-rau-siv CSS los ntawm kev ntxiv cov kab no rau koj qhov project nkag nkag:

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

Hauv qhov no koj tuaj yeem siv koj txoj cai uas twb muaj lawm rau cssyam tsis muaj kev hloov kho tshwj xeeb rau webpack config, tshwj tsis yog koj tsis xav tau sass-loaderstyle -loader thiab css-loader .

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