വെബ്പാക്ക്

വെബ്‌പാക്ക് ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രോജക്റ്റിൽ ബൂട്ട്‌സ്‌ട്രാപ്പ് എങ്ങനെ ഉൾപ്പെടുത്താമെന്ന് മനസിലാക്കുക.

ബൂട്ട്സ്ട്രാപ്പ് ഇൻസ്റ്റാൾ ചെയ്യുന്നു

npm ഉപയോഗിച്ച് ഒരു Node.js മൊഡ്യൂളായി bootstrap ഇൻസ്റ്റാൾ ചെയ്യുക .

JavaScript ഇറക്കുമതി ചെയ്യുന്നു

നിങ്ങളുടെ ആപ്പിന്റെ എൻട്രി പോയിന്റിലേക്ക് ഈ ലൈൻ ചേർത്തുകൊണ്ട് ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ JavaScript ഇറക്കുമതി ചെയ്യുക (സാധാരണയായി index.jsഅല്ലെങ്കിൽ app.js):

import 'bootstrap';

പകരമായി, നിങ്ങൾക്ക് ആവശ്യാനുസരണം പ്ലഗിനുകൾ വ്യക്തിഗതമായി ഇറക്കുമതി ചെയ്യാം:

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

ബൂട്ട്സ്ട്രാപ്പ് പ്രോപ്പർട്ടിയിൽ വ്യക്തമാക്കിയിരിക്കുന്ന jQuery , Popper എന്നിവയെ ആശ്രയിച്ചിരിക്കുന്നു ; peerDependenciesഇതിനർത്ഥം അവ രണ്ടും നിങ്ങളുടെ package.jsonഉപയോഗത്തിൽ ചേർക്കുന്നത് ഉറപ്പാക്കേണ്ടതുണ്ട് എന്നാണ് npm install --save jquery popper.js.

ശൈലികൾ ഇറക്കുമതി ചെയ്യുന്നു

പ്രീകംപൈൽഡ് സാസ് ഇറക്കുമതി ചെയ്യുന്നു

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ മുഴുവൻ സാധ്യതകളും ആസ്വദിക്കാനും അത് നിങ്ങളുടെ ആവശ്യങ്ങൾക്കനുസരിച്ച് ഇഷ്‌ടാനുസൃതമാക്കാനും, നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ ബണ്ട്ലിംഗ് പ്രക്രിയയുടെ ഭാഗമായി ഉറവിട ഫയലുകൾ ഉപയോഗിക്കുക.

ആദ്യം, നിങ്ങളുടേത് സൃഷ്‌ടിച്ച് ബിൽറ്റ്-ഇൻ ഇഷ്‌ടാനുസൃത വേരിയബിളുകൾ_custom.scss അസാധുവാക്കാൻ അത് ഉപയോഗിക്കുക . തുടർന്ന്, നിങ്ങളുടെ ഇഷ്‌ടാനുസൃത വേരിയബിളുകൾ ഇറക്കുമതി ചെയ്യാൻ നിങ്ങളുടെ പ്രധാന Sass ഫയൽ ഉപയോഗിക്കുക, തുടർന്ന് ബൂട്ട്‌സ്‌ട്രാപ്പ്:

@import "custom";
@import "~bootstrap/scss/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 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 ഇറക്കുമതി ചെയ്യുന്നു

പകരമായി, നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ എൻട്രി പോയിന്റിലേക്ക് ഈ വരി ചേർത്തുകൊണ്ട് നിങ്ങൾക്ക് ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ ഉപയോഗിക്കാൻ തയ്യാറുള്ള CSS ഉപയോഗിക്കാം:

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

ഈ സാഹചര്യത്തിൽ, നിങ്ങൾക്ക് സ്റ്റൈൽ-ലോഡറും css- ലോഡറുംcss ആവശ്യമില്ലെങ്കിൽ, വെബ്‌പാക്ക് കോൺഫിഗറേഷനിൽ പ്രത്യേക മാറ്റങ്ങളൊന്നും കൂടാതെ നിങ്ങളുടെ നിലവിലുള്ള നിയമം ഉപയോഗിക്കാം .sass-loader

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