Webpack na swihlanganisi

Ku nghenisa Bootstrap

Nghenisa bootstrap tanihi modula ya Node.js hi ku tirhisa npm.

Ku nghenisa JavaScript

Nghenisa JavaScript ya Bootstrap hi ku engetela layini leyi eka ndhawu yo nghena ya app ya wena (hi ntolovelo index.jskumbe app.js):

import 'bootstrap';

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

Handle ka sweswo, loko u lava ntsena ti-plugin ta hina ti nga ri tingani, u nga ha nghenisa ti-plugin hi toxe loko swi laveka:

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

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

Bootstrap yi titshege hi Popper , leyi boxiweke eka peerDependenciesnhundzu. Leswi swi vula leswaku u ta boheka ku tiyisisa leswaku u yi engetela eka ku package.jsontirhisa ka wena npm install @popperjs/core.

Ku Nghenisa Switayili

Ku nghenisa Sass leyi hlengeletiweke ka ha ri emahlweni

Ku tiphina hi vuswikoti lebyi heleleke bya Bootstrap na ku yi lulamisa hi ku ya hi swilaveko swa wena, tirhisa tifayela ta xihlovo tanihi xiphemu xa endlelo ra ku hlanganisa ra phurojeke ya wena.

Xo sungula, tiendlela ya wena _custom.scssivi u yi tirhisa ku tlula swilo leswi cinca-cincaka swa ntolovelo leswi akiweke endzeni . Kutani, tirhisa fayili ya wena leyikulu ya Sass ku nghenisa swilo swa wena leswi cinca-cincaka swa ntolovelo, ivi ku landzela Bootstrap:

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

Leswaku Bootstrap yi hlengeleta, tiyisisa leswaku u nghenisa no tirhisa swichayachayani leswi lavekaka: sass-loader , postcss-loader na Autoprefixer . Hi ku lulamisiwa lokutsongo, config ya wena ya webpack yi fanele ku katsa nawu lowu kumbe leswi fanaka na swona:

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

Ku nghenisa CSS leyi Hlengeletiweke

Handle ka sweswo, u nga tirhisa CSS ya Bootstrap leyi lunghekeleke ku tirhisiwa hi ku engetela ntsena layini leyi eka ndhawu yo nghena ya phurojeke ya wena:

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

Eka xiyimo lexi u nga tirhisa nawu wa wena lowu nga kona for csshandle ka ku cinca ko hlawuleka eka webpack config, handle ka loko u nga lavi sass-loaderntsena style-loader na css-loader .

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