വെബ്പാക്ക്
വെബ്പാക്ക് 3 ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രോജക്റ്റിൽ ബൂട്ട്സ്ട്രാപ്പ് എങ്ങനെ ഉൾപ്പെടുത്താമെന്ന് മനസിലാക്കുക.
npm ഉപയോഗിച്ച് ഒരു Node.js മൊഡ്യൂളായി bootstrap ഇൻസ്റ്റാൾ ചെയ്യുക .
നിങ്ങളുടെ ആപ്പിന്റെ എൻട്രി പോയിന്റിലേക്ക് (സാധാരണയായി അല്ലെങ്കിൽ ) ഈ വരി ചേർത്തുകൊണ്ട് ബൂട്ട്സ്ട്രാപ്പിന്റെ JavaScript ഇറക്കുമതി ചെയ്യുക :index.js
app.js
പകരമായി, നിങ്ങൾക്ക് ആവശ്യാനുസരണം പ്ലഗിനുകൾ വ്യക്തിഗതമായി ഇറക്കുമതി ചെയ്യാം:
ബൂട്ട്സ്ട്രാപ്പ് jQuery , പോപ്പർ എന്നിവയെ ആശ്രയിച്ചിരിക്കുന്നു , ഇവ നിർവചിച്ചിരിക്കുന്നത്, നിങ്ങളുടെ ഉപയോഗത്തിൽ peerDependencies
ഇവ രണ്ടും ചേർക്കുന്നത് നിങ്ങൾ ഉറപ്പാക്കണം എന്നാണ് .package.json
npm install --save jquery popper.js
നിങ്ങൾ പ്ലഗിനുകൾ വ്യക്തിഗതമായി ഇറക്കുമതി ചെയ്യാൻ തിരഞ്ഞെടുക്കുകയാണെങ്കിൽ , നിങ്ങൾ എക്സ്പോർട്ട്-ലോഡറും ഇൻസ്റ്റാൾ ചെയ്യണം.
ബൂട്ട്സ്ട്രാപ്പിന്റെ മുഴുവൻ സാധ്യതകളും ആസ്വദിക്കാനും അത് നിങ്ങളുടെ ആവശ്യങ്ങൾക്കനുസരിച്ച് ഇഷ്ടാനുസൃതമാക്കാനും, നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ ബണ്ട്ലിംഗ് പ്രക്രിയയുടെ ഭാഗമായി ഉറവിട ഫയലുകൾ ഉപയോഗിക്കുക.
ആദ്യം, നിങ്ങളുടേത് സൃഷ്ടിച്ച് ബിൽറ്റ്-ഇൻ ഇഷ്ടാനുസൃത വേരിയബിളുകൾ_custom.scss
അസാധുവാക്കാൻ അത് ഉപയോഗിക്കുക . തുടർന്ന്, നിങ്ങളുടെ ഇഷ്ടാനുസൃത വേരിയബിളുകൾ ഇറക്കുമതി ചെയ്യുന്നതിന് നിങ്ങളുടെ പ്രധാന സാസ് ഫയൽ ഉപയോഗിക്കുക, തുടർന്ന് ബൂട്ട്സ്ട്രാപ്പ്:
ബൂട്ട്സ്ട്രാപ്പ് കംപൈൽ ചെയ്യുന്നതിനായി, ആവശ്യമായ ലോഡറുകൾ ഇൻസ്റ്റാൾ ചെയ്ത് ഉപയോഗിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക: sass- loader , postcss-loader with Autoprefixer . കുറഞ്ഞ സജ്ജീകരണത്തിൽ, നിങ്ങളുടെ വെബ്പാക്ക് കോൺഫിഗറേഷനിൽ ഈ നിയമമോ സമാനമായതോ ഉൾപ്പെടുത്തണം:
പകരമായി, നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ എൻട്രി പോയിന്റിലേക്ക് ഈ ലൈൻ ചേർത്തുകൊണ്ട് നിങ്ങൾക്ക് ബൂട്ട്സ്ട്രാപ്പിന്റെ ഉപയോഗിക്കാൻ തയ്യാറുള്ള css ഉപയോഗിക്കാം:
ഈ സാഹചര്യത്തിൽ, നിങ്ങൾക്ക് സ്റ്റൈൽ-ലോഡറും css- ലോഡറുംcss
ആവശ്യമില്ല എന്നതൊഴിച്ചാൽ വെബ്പാക്ക് കോൺഫിഗറേഷനിൽ പ്രത്യേക പരിഷ്ക്കരണങ്ങളൊന്നും കൂടാതെ നിങ്ങളുടെ നിലവിലുള്ള നിയമം ഉപയോഗിക്കാം .sass-loader