වෙබ්පැක්

Webpack 3 භාවිතයෙන් ඔබේ ව්‍යාපෘතියට Bootstrap ඇතුළත් කරන්නේ කෙසේදැයි ඉගෙන ගන්න.

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

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

JavaScript ආයාත කිරීම

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

import 'bootstrap';

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

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

Bootstrap jQuery සහ Popper මත රඳා පවතී , මේවා අර්ථ දක්වා ඇත peerDependencies, මෙයින් අදහස් කරන්නේ ඔබ ඒවා දෙකම ඔබේ package.jsonභාවිතයට එක් කිරීමට වග බලා ගත යුතු npm install --save jquery popper.jsබවයි.

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

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

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

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

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

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

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

සම්පාදනය කරන ලද 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']
      }
    ]
  }
  ...