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

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

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

JavaScript ආයාත කිරීම

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

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

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

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

Bootstrap දේපලෙහි නිශ්චිතව දක්වා ඇති පොපර් මත රඳා පවතී . මෙයින් අදහස් කරන්නේ ඔබ එය ඔබගේ භාවිතයට peerDependenciesඑක් කිරීමට වග බලා ගත යුතු බවයි .package.jsonnpm 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'
      ]
    }
  ]
}
// ...