වෙබ්පැක් සහ බණ්ඩලර්

Bootstrap ස්ථාපනය කිරීම

npm භාවිතයෙන් Bootstrap Node.js මොඩියුලයක් ලෙස ස්ථාපනය කරන්න .

JavaScript ආයාත කිරීම

ඔබගේ යෙදුමේ ඇතුල් වීමේ ස්ථානයට මෙම පේළිය එක් කිරීමෙන් Bootstrap හි JavaScript ආයාත කරන්න (සාමාන්‍යයෙන් index.jsහෝ app.js):

import 'bootstrap';

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

විකල්පයක් ලෙස, ඔබට අවශ්‍ය වන්නේ අපගේ ප්ලගීන කිහිපයක් පමණක් නම්, ඔබට අවශ්‍ය පරිදි තනි තනිව ප්ලගීන ආයාත කළ හැක :

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

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

Bootstrap දේපලෙහි නිශ්චිතව දක්වා ඇති පොපර් මත රඳා පවතී . peerDependenciesමෙයින් අදහස් කරන්නේ එය ඔබගේ package.jsonභාවිතයට එක් කිරීමට වග බලා ගත යුතු npm install @popperjs/coreබවයි.

මෝස්තර ආනයනය කිරීම

Precompiled Sass ආනයනය කිරීම

Bootstrap හි සම්පූර්ණ විභවය භුක්ති විඳීමට සහ එය ඔබගේ අවශ්‍යතා අනුව අභිරුචිකරණය කිරීමට, ඔබේ ව්‍යාපෘතියේ බද්ධ කිරීමේ ක්‍රියාවලියේ කොටසක් ලෙස මූලාශ්‍ර ගොනු භාවිතා කරන්න.

පළමුව, ඔබේම නිර්මාණයක් සාදා එය ගොඩනඟන ලද අභිරුචි විචල්‍යයන්_custom.scss අභිබවා යාමට භාවිතා කරන්න . ඉන්පසු, ඔබේ අභිරුචි විචල්‍ය ආයාත කිරීමට ඔබේ ප්‍රධාන Sass ගොනුව භාවිතා කරන්න, ඉන්පසු Bootstrap:

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

Bootstrap සම්පාදනය කිරීම සඳහා, ඔබ අවශ්‍ය ලෝඩර ස්ථාපනය කර භාවිතා කරන බවට වග බලා ගන්න: sass-loader , postcss-loader with Autoprefixer . අවම සැකසුම සමඟින්, ඔබේ වෙබ්පැක් වින්‍යාසය තුළ මෙම රීතිය හෝ ඊට සමාන ඇතුළත් විය යුතුය:

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

සම්පාදනය කරන ලද CSS ආයාත කිරීම

විකල්පයක් ලෙස, ඔබේ ව්‍යාපෘතියේ පිවිසුම් ස්ථානයට මෙම රේඛාව සරලව එක් කිරීමෙන් ඔබට Bootstrap හි භාවිතයට සූදානම් CSS භාවිතා කළ හැක:

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

මෙම අවස්ථාවෙහිදී, ඔබට හුදෙක් style-loader සහ css-loadercss අවශ්‍ය නොවන හැර, webpack config හි විශේෂ වෙනස් කිරීම් නොමැතිව ඔබගේ පවතින රීතිය භාවිතා කළ හැක .sass-loader

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