Webpack ug mga bundler

Pag-instalar sa Bootstrap

I- install ang bootstrap isip usa ka module sa Node.js gamit ang npm.

Pag-import sa JavaScript

I- import ang JavaScript sa Bootstrap pinaagi sa pagdugang niini nga linya sa entry point sa imong app (kasagaran index.jso app.js):

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

Sa laing bahin, kung kinahanglan nimo ang pipila lang sa among mga plugins, mahimo nimong i- import ang mga plugins nga tagsa-tagsa kung gikinahanglan:

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

Ang Bootstrap nagdepende sa Popper , nga gipiho sa peerDependencieskabtangan. Kini nagpasabot nga kinahanglan nimong sigurohon nga idugang kini sa imong package.jsonpaggamit npm install @popperjs/core.

Mga Estilo sa Pag-import

Pag-import sa Precompiled Sass

Aron matagamtam ang hingpit nga potensyal sa Bootstrap ug ipahiangay kini sa imong mga panginahanglan, gamita ang gigikanan nga mga file ingon usa ka bahin sa proseso sa pagbugkos sa imong proyekto.

Una, paghimo og imong kaugalingon _custom.scssug gamita kini aron ma-override ang mga built-in custom variables . Dayon, gamita ang imong nag-unang Sass file sa pag-import sa imong custom variables, gisundan sa Bootstrap:

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

Para ma-compile ang Bootstrap, siguroha nga imong i-install ug gamiton ang mga gikinahanglang loaders: sass-loader , postcss-loader with Autoprefixer . Uban sa gamay nga setup, ang imong webpack config kinahanglan nga maglakip niini nga lagda o susama:

// ...
{
  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 sa Compiled CSS

Sa laing paagi, mahimo nimong gamiton ang andam-gamiton nga CSS sa Bootstrap pinaagi lamang sa pagdugang niini nga linya sa entry point sa imong proyekto:

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

Niini nga kaso mahimo nimong gamiton ang imong kasamtangan nga lagda alang sa csswalay bisan unsang espesyal nga pagbag-o sa webpack config, gawas nga dili nimo kinahanglan sass-loaderang style-loader ug css-loader .

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