Webpack at mga bundler

Pag-install ng Bootstrap

I- install ang bootstrap bilang isang Node.js module gamit ang npm.

Pag-import ng JavaScript

I- import ang JavaScript ng Bootstrap sa pamamagitan ng pagdaragdag ng linyang ito sa entry point ng iyong app (karaniwan ay index.jso app.js):

import 'bootstrap';

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

Bilang kahalili, kung kailangan mo lamang ng ilan sa aming mga plugin, maaari kang mag- import ng mga plugin nang paisa- isa kung kinakailangan:

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

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

Nakadepende ang Bootstrap sa Popper , na tinukoy sa peerDependenciesproperty. Nangangahulugan ito na kailangan mong tiyakin na idagdag ito sa iyong package.jsonpaggamit npm install @popperjs/core.

Pag-import ng mga Estilo

Ini-import ang Precompiled Sass

Upang tamasahin ang buong potensyal ng Bootstrap at i-customize ito sa iyong mga pangangailangan, gamitin ang mga source file bilang bahagi ng proseso ng pag-bundle ng iyong proyekto.

Una, lumikha ng iyong sarili _custom.scssat gamitin ito upang i-override ang mga built-in na custom na variable . Pagkatapos, gamitin ang iyong pangunahing Sass file upang i-import ang iyong mga custom na variable, na sinusundan ng Bootstrap:

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

Para makapag-compile ang Bootstrap, tiyaking i-install at ginagamit mo ang mga kinakailangang loader: sass-loader , postcss-loader na may Autoprefixer . Sa kaunting pag-setup, dapat isama ng iyong webpack config ang panuntunang ito o katulad:

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

Pag-import ng Compiled CSS

Bilang kahalili, maaari mong gamitin ang CSS na handa nang gamitin ng Bootstrap sa pamamagitan lamang ng pagdaragdag ng linyang ito sa entry point ng iyong proyekto:

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

Sa kasong ito, maaari mong gamitin ang iyong umiiral na panuntunan nang csswalang anumang mga espesyal na pagbabago sa webpack config, maliban na sass-loaderlamang hindi mo kailangan ng style-loader at css-loader .

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