Apo wẹẹbu

Kọ ẹkọ bii o ṣe le ṣafikun Bootstrap sinu iṣẹ akanṣe rẹ nipa lilo Webpack 3.

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 jẹ igbẹkẹle lori jQuery ati Popper , iwọnyi jẹ asọye bi peerDependencies, eyi tumọ si pe iwọ yoo ni lati rii daju pe o ṣafikun awọn mejeeji 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 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
    }]
  },
  ...

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