Webpack

Pagkat-on unsaon pag-apil ang Bootstrap sa imong proyekto gamit ang Webpack.

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):

import 'bootstrap';

Sa laing paagi, mahimo nimong i- import ang mga plugin nga tagsa-tagsa kung gikinahanglan:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

Ang Bootstrap nagdepende sa jQuery ug Popper , nga gipiho sa peerDependencieskabtangan; kini nagpasabot nga kinahanglan nimong sigurohon nga idugang ang duha sa imong package.jsonpaggamit npm install --save jquery popper.js.

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 isip bahin sa proseso sa pagbugkos sa imong proyekto.

Una, paghimo og imong kaugalingon _custom.scssug gamita kini aron ma-override ang mga built-in nga 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";

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

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

Pag-import sa Compiled CSS

Sa laing bahin, 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']
    }
  ]
}
...