Apo wẹẹbu

Kọ ẹkọ bi o ṣe le ṣafikun Bootstrap sinu iṣẹ akanṣe rẹ nipa lilo apo wẹẹbu.

Fifi Bootstrap sori ẹrọ

Fi sori ẹrọ bootstrap bi Node.js module nipa lilo npm.

Gbigbe JavaScript wọle

Ṣe agbewọle Bootstrap JavaScript nipa fifi laini yii kun si aaye titẹsi app rẹ (nigbagbogbo index.jstabi app.js):

import 'bootstrap';

Ni omiiran, o le gbe awọn afikun wọle lọkọọkan bi o ṣe nilo:

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

Bootstrap da lori jQuery ati Popper , eyi ti o wa ni pato ninu peerDependenciesohun ini; eyi tumọ si pe iwọ yoo ni lati rii daju pe o fi awọn mejeeji kun si package.jsonlilo rẹ npm install --save jquery popper.js.

Akowọle Styles

Ṣe agbewọle Sass ti a ti ṣajọ tẹlẹ

Lati gbadun agbara ni kikun ti Bootstrap ati ṣe akanṣe rẹ si awọn iwulo rẹ, lo awọn faili orisun gẹgẹbi apakan ti ilana iṣakojọpọ iṣẹ akanṣe rẹ.

Ni akọkọ, ṣẹda tirẹ _custom.scsski o lo lati bori awọn oniyipada aṣa ti a ṣe sinu rẹ . Lẹhinna, lo faili Sass akọkọ rẹ lati gbe awọn oniyipada aṣa rẹ wọle, atẹle nipasẹ Bootstrap:

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

Fun Bootstrap lati ṣajọ, rii daju pe o fi sori ẹrọ ati lo awọn agberu ti a beere: sass-loader , postcss-loader pẹlu Autoprefixer . Pẹlu iṣeto ti o kere ju, atunto apo-iwe wẹẹbu rẹ yẹ ki o pẹlu ofin yii tabi iru:

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

Gbigbawọle CSS Iṣakojọpọ

Ni omiiran, o le lo CSS ti o ṣetan lati lo Bootstrap nipa fifi laini yii kun si aaye titẹsi iṣẹ akanṣe rẹ:

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

Ni ọran yii o le lo ofin ti o wa tẹlẹ csslaisi awọn iyipada pataki si atunto apo-iwe wẹẹbu, ayafi ti o ko ba nilo sass-loaderagberu ara ati css-loader .

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