Webpack agus cuachtair

Suiteáil Bootstrap

Suiteáil bootstrap mar mhodúl Node.js ag baint úsáide as npm.

JavaScript á iompórtáil

Iompórtáil JavaScript Bootstrap tríd an líne seo a chur le pointe iontrála d’aip (go hiondúil index.jsnó app.js):

import 'bootstrap';

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

Mar mhalairt air sin, mura bhfuil uait ach roinnt dár mbreiseáin, is féidir leat forlíontáin a iompórtáil ina n-aonar de réir mar is gá:

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

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

Braitheann Bootstrap ar Popper , atá sonraithe sa peerDependenciesmhaoin . Ciallaíonn sé seo go mbeidh ort a chinntiú é a chur le do package.jsonúsáid npm install @popperjs/core.

Stíleanna Iompórtála

Sass Réamh-thiomsaithe a Iompórtáil

Chun leas iomlán a bhaint as Bootstrap agus é a shaincheapadh do do chuid riachtanas, bain úsáid as na comhaid foinse mar chuid de phróiseas cuachta do thionscadail.

Ar dtús, cruthaigh do chuid féin agus bain úsáid as chun na hathróga saincheaptha ionsuite_custom.scss a shárú . Ansin, bain úsáid as do phríomhchomhad Sass chun d’athróga saincheaptha a iompórtáil, agus ansin Bootstrap:

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

Le gur féidir le Bootstrap a thiomsú, cinntigh go ndéanann tú na lódairí riachtanacha a shuiteáil agus a úsáid: sass-loader , postcss-loader le Autoprefixer . Le socrú íosta, ba cheart go mbeadh an riail seo nó a leithéid san áireamh i do chumraíocht pacáiste gréasáin:

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

CSS Tiomsaithe á Iompórtáil

Nó is féidir leat CSS réidh-le-úsáid Bootstrap a úsáid tríd an líne seo a chur le pointe iontrála do thionscadail:

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

Sa chás seo is féidir leat an riail atá agat cheana féin a úsáid le haghaidh cssgan aon mhodhnuithe speisialta ar chumraíocht an phacáiste gréasáin, ach amháin nach gá duit sass-loaderach style-loader agus css-loader .

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