ୱେବପ୍ୟାକ୍ ଏବଂ ବଣ୍ଡଲର୍ |

ବୁଟଷ୍ଟ୍ରାପ୍ ସଂସ୍ଥାପନ କରୁଛି |

Npm ବ୍ୟବହାର କରି Node.js ମଡ୍ୟୁଲ୍ ଭାବରେ ବୁଟଷ୍ଟ୍ରାପ୍ ସଂସ୍ଥାପନ କରନ୍ତୁ |

ଜାଭାସ୍କ୍ରିପ୍ଟ ଆମଦାନୀ କରୁଛି |

ଆପଣଙ୍କର ଆପ୍ ର ଏଣ୍ଟ୍ରି ପଏଣ୍ଟରେ (ସାଧାରଣତ or କିମ୍ବା ) ଏହି ରେଖା ଯୋଡି ବୁଟଷ୍ଟ୍ରାପ୍ ର ଜାଭାସ୍କ୍ରିପ୍ଟ ଆମଦାନୀ କରନ୍ତୁ :index.jsapp.js

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

ବ ly କଳ୍ପିକ ଭାବରେ, ଯଦି ଆପଣ କେବଳ ଆମର କିଛି ପ୍ଲଗଇନ୍ ଆବଶ୍ୟକ କରନ୍ତି, ଆପଣ ଆବଶ୍ୟକ ଅନୁଯାୟୀ ପୃଥକ ଭାବରେ ପ୍ଲଗଇନ୍ ଆମଦାନୀ କରିପାରିବେ :

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

ବୁଟଷ୍ଟ୍ରାପ୍ ପପର୍ ଉପରେ ନିର୍ଭର କରେ , ଯାହା peerDependenciesସମ୍ପତ୍ତିରେ ନିର୍ଦ୍ଦିଷ୍ଟ ହୋଇଛି | package.jsonଏହାର ଅର୍ଥ ହେଉଛି ତୁମ ବ୍ୟବହାରରେ ଏହାକୁ ଯୋଡିବାକୁ ନିଶ୍ଚିତ କରିବାକୁ ପଡିବ npm install @popperjs/core|

ଶ yles ଳୀ ଆମଦାନୀ କରିବା |

ପୂର୍ବାବଲୋକିତ ସାସ୍ ଆମଦାନୀ କରିବା |

ବୁଟଷ୍ଟ୍ରାପ୍ ର ପୂର୍ଣ୍ଣ ସମ୍ଭାବନାକୁ ଉପଭୋଗ କରିବାକୁ ଏବଂ ଏହାକୁ ତୁମର ଆବଶ୍ୟକତା ଅନୁଯାୟୀ କଷ୍ଟୋମାଇଜ୍ କରିବାକୁ, ଉତ୍ସ ଫାଇଲଗୁଡ଼ିକୁ ତୁମର ପ୍ରୋଜେକ୍ଟର ବଣ୍ଡଲିଂ ପ୍ରକ୍ରିୟାର ଏକ ଅଂଶ ଭାବରେ ବ୍ୟବହାର କର |

ପ୍ରଥମେ, ଆପଣଙ୍କର ନିଜର ସୃଷ୍ଟି କରନ୍ତୁ ଏବଂ ବିଲ୍ଟ-ଇନ୍ କଷ୍ଟମ୍ ଭେରିଏବଲ୍_custom.scss ଗୁଡିକୁ ନବଲିଖନ କରିବାକୁ ବ୍ୟବହାର କରନ୍ତୁ | ତାପରେ, ଆପଣଙ୍କର କଷ୍ଟମ୍ ଭେରିଏବଲ୍ ଆମଦାନୀ କରିବାକୁ ଆପଣଙ୍କର ମୁଖ୍ୟ ସାସ୍ ଫାଇଲ୍ ବ୍ୟବହାର କରନ୍ତୁ, ତା’ପରେ ବୁଟଷ୍ଟ୍ରାପ୍:

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

ବୁଟଷ୍ଟ୍ରାପ୍ ସଙ୍କଳନ କରିବା ପାଇଁ, ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ଆପଣ ଆବଶ୍ୟକ ଲୋଡର୍ ସଂସ୍ଥାପନ ଏବଂ ବ୍ୟବହାର କରନ୍ତୁ: ସାସ୍-ଲୋଡର୍ , ଅଟୋପ୍ରେଫିକ୍ସର୍ ସହିତ ପୋଷ୍ଟସ୍ -ଲୋଡର୍ | ସର୍ବନିମ୍ନ ସେଟଅପ୍ ସହିତ, ଆପଣଙ୍କର ୱେବପ୍ୟାକ୍ ବିନ୍ୟାସ ଏହି ନିୟମ କିମ୍ବା ସମାନ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ଉଚିତ:

// ...
{
  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 ଆମଦାନି |

ବ ly କଳ୍ପିକ ଭାବରେ, ଆପଣ କେବଳ ଆପଣଙ୍କର ପ୍ରୋଜେକ୍ଟର ଏଣ୍ଟ୍ରି ପଏଣ୍ଟରେ ଏହି ରେଖା ଯୋଡି ବୁଟଷ୍ଟ୍ରାପ୍ ର ପ୍ରସ୍ତୁତ-ବ୍ୟବହାର CSS ବ୍ୟବହାର କରିପାରିବେ:

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

ଏହି ପରିପ୍ରେକ୍ଷୀରେ cssୱେବପ୍ୟାକ୍ କନଫିଗରେ କ special ଣସି ବିଶେଷ ପରିବର୍ତ୍ତନ ନକରି ଆପଣ ଆପଣଙ୍କର ବିଦ୍ୟମାନ ନିୟମକୁ ବ୍ୟବହାର କରିପାରିବେ, କେବଳ ଆପଣ sass-loaderକେବଳ ଷ୍ଟାଇଲ୍-ଲୋଡର୍ ଏବଂ css- ଲୋଡର୍ ଆବଶ୍ୟକ କରନ୍ତି ନାହିଁ |

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