ୱେବପ୍ୟାକ୍ |

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

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

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

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

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

import 'bootstrap';

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

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

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ jQuery ଏବଂ Popper ଉପରେ ନିର୍ଭରଶୀଳ , ଏଗୁଡିକ ପରିଭାଷିତ ହୋଇଛି , ଏହାର ଅର୍ଥ ହେଉଛି ତୁମ ବ୍ୟବହାରରେ peerDependenciesଉଭୟକୁ ଯୋଡିବାକୁ ନିଶ୍ଚିତ କରିବାକୁ ପଡିବ |package.jsonnpm 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 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 ଆମଦାନି |

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

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

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

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