Webpack

Alamin kung paano isama ang Bootstrap sa iyong proyekto gamit ang Webpack 3.

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';

Bilang kahalili, maaari kang mag- import ng mga plugin nang paisa-isa kung kinakailangan:

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

Ang Bootstrap ay nakasalalay sa jQuery at Popper , ang mga ito ay tinukoy bilang peerDependencies, nangangahulugan ito na kailangan mong tiyakin na idagdag ang pareho ng mga ito sa iyong package.jsonpaggamit npm install --save jquery popper.js.

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

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