Pacáiste Gréasáin

Foghlaim conas Bootstrap a chur san áireamh i do thionscadal ag baint úsáide as Webpack.

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

Nó is féidir leat forlíontáin a iompórtáil ina n-aonar de réir mar is gá:

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

Braitheann Bootstrap ar jQuery agus Popper , atá sonraithe sa peerDependenciesmhaoin; ciallaíonn sé seo go mbeidh ort a chinntiú an dá cheann acu a chur le do package.jsonúsáid npm install --save jquery popper.js.

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

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