အဓိကအကြောင်းအရာသို့ ကျော်သွားပါ။ စာရွက်စာတမ်းလမ်းညွှန်မှုသို့ ကျော်သွားပါ။
in English

Webpack နှင့် အစုအဝေးများ

Webpack သို့မဟုတ် အခြားအစုအဝေးများကို အသုံးပြု၍ သင့်ပရောဂျက်တွင် Bootstrap ထည့်သွင်းနည်းကို လေ့လာပါ။

Bootstrap ထည့်သွင်းခြင်း။

npm ကို အသုံးပြု၍ bootstrap ကို Node.js module တစ်ခုအဖြစ် ထည့်သွင်းပါ။

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 သည် Property တွင်သတ်မှတ်ထားသည့် Popper ပေါ်တွင်မူတည်သည် ။ peerDependenciesဆိုလိုသည်မှာ သင်သည် ၎င်းကို သင်၏ package.jsonအသုံးပြုမှု တွင် ထည့်သွင်းရန် သေချာစေရမည်ဟု ဆိုလိုသည် npm install @popperjs/core

ပုံစံများကို တင်သွင်းခြင်း။

Precompiled Sass ကို တင်သွင်းခြင်း။

Bootstrap ၏ အလားအလာကို အပြည့်အဝခံစားပြီး သင့်လိုအပ်ချက်များနှင့် ကိုက်ညီစေရန်၊ အရင်းအမြစ်ဖိုင်များကို သင့်ပရောဂျက်၏ အစုအဝေးလုပ်ငန်းစဉ်၏ တစ်စိတ်တစ်ပိုင်းအဖြစ် အသုံးပြုပါ။

ပထမဦးစွာ၊ သင့်ကိုယ်ပိုင်ဖန်တီးပြီး built-in စိတ်ကြိုက် variable များကို_custom.scss လွှမ်းမိုးရန် ၎င်းကိုအသုံးပြုပါ ။ ထို့နောက်၊ သင်၏စိတ်ကြိုက်ပြောင်းလဲမှုများကိုတင်သွင်းရန်သင်၏ပင်မ Sass ဖိုင်ကိုသုံးပါ၊ ထို့နောက် Bootstrap ဖြင့်လိုက်ပါသည်-

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

Bootstrap ကို compile လုပ်ရန်အတွက်၊ လိုအပ်သော loaders များကို ထည့်သွင်းပြီး အသုံးပြုကြောင်း သေချာပါစေ။- sass-loaderpostcss-loader သည် 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'
  }]
}
// ...

Compiled CSS ကို ထည့်သွင်းခြင်း။

တစ်နည်းအားဖြင့် သင်သည် ဤစာကြောင်းကို သင့်ပရောဂျက်၏ entry point သို့ ရိုးရှင်းစွာထည့်ခြင်းဖြင့် 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'
      ]
    }
  ]
}
// ...