ୱେବପ୍ୟାକ୍ |

ୱେବପ୍ୟାକ୍ ବ୍ୟବହାର କରି କିପରି ତୁମର ପ୍ରୋଜେକ୍ଟରେ ବୁଟଷ୍ଟ୍ରାପ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯିବ ଶିଖ |

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

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

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

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

import 'bootstrap';

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

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

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ jQuery ଏବଂ Popper ଉପରେ ନିର୍ଭର କରେ , ଯାହା peerDependenciesସମ୍ପତ୍ତିରେ ନିର୍ଦ୍ଦିଷ୍ଟ ହୋଇଛି | package.jsonଏହାର ଅର୍ଥ ହେଉଛି ତୁମ ବ୍ୟବହାରରେ ଉଭୟକୁ ଯୋଡିବାକୁ ନିଶ୍ଚିତ କରିବାକୁ ପଡିବ npm install --save jquery popper.js|

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

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

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

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

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

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

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

ସଙ୍କଳିତ CSS ଆମଦାନି |

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

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

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

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