Webpack ati awọn edidi

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

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

Ni omiiran, ti o ba nilo diẹ ninu awọn afikun wa, o le gbe awọn afikun wọle lọkọọkan bi o ti nilo:

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

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

Bootstrap da lori Popper , eyiti o jẹ pato ninu ohun- peerDependenciesini naa. Eyi tumọ si pe iwọ yoo ni lati rii daju pe o fi kun si package.jsonlilo rẹ npm install @popperjs/core.

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

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