വെബ്പാക്കും ബണ്ടലറുകളും
Webpack അല്ലെങ്കിൽ മറ്റ് ബണ്ടലറുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രോജക്റ്റിൽ ബൂട്ട്സ്ട്രാപ്പ് ഉൾപ്പെടുത്തുന്നത് എങ്ങനെയെന്ന് അറിയുക.
ബൂട്ട്സ്ട്രാപ്പ് ഇൻസ്റ്റാൾ ചെയ്യുന്നു
npm ഉപയോഗിച്ച് ഒരു Node.js മൊഡ്യൂളായി bootstrap ഇൻസ്റ്റാൾ ചെയ്യുക .
JavaScript ഇറക്കുമതി ചെയ്യുന്നു
നിങ്ങളുടെ ആപ്പിന്റെ എൻട്രി പോയിന്റിലേക്ക് ഈ ലൈൻ ചേർത്തുകൊണ്ട് ബൂട്ട്സ്ട്രാപ്പിന്റെ JavaScript ഇറക്കുമതി ചെയ്യുക (സാധാരണയായി index.js
അല്ലെങ്കിൽ app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
പകരമായി, നിങ്ങൾക്ക് ഞങ്ങളുടെ കുറച്ച് പ്ലഗിനുകൾ മാത്രമേ ആവശ്യമുള്ളൂവെങ്കിൽ, നിങ്ങൾക്ക് ആവശ്യാനുസരണം വ്യക്തിഗതമായി പ്ലഗിനുകൾ ഇറക്കുമതി ചെയ്യാം :
import Alert from 'bootstrap/js/dist/alert';
...
ബൂട്ട്സ്ട്രാപ്പ് പ്രോപ്പർട്ടിയിൽ വ്യക്തമാക്കിയ പോപ്പറിനെ ആശ്രയിച്ചിരിക്കുന്നു . peerDependencies
ഇതിനർത്ഥം ഇത് നിങ്ങളുടെ package.json
ഉപയോഗത്തിലേക്ക് ചേർക്കുന്നത് ഉറപ്പാക്കേണ്ടതുണ്ട് എന്നാണ് npm install @popperjs/core
.
ശൈലികൾ ഇറക്കുമതി ചെയ്യുന്നു
പ്രീകംപൈൽഡ് സാസ് ഇറക്കുമതി ചെയ്യുന്നു
ബൂട്ട്സ്ട്രാപ്പിന്റെ മുഴുവൻ സാധ്യതകളും ആസ്വദിക്കാനും അത് നിങ്ങളുടെ ആവശ്യങ്ങൾക്കനുസരിച്ച് ഇഷ്ടാനുസൃതമാക്കാനും, നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ ബണ്ട്ലിംഗ് പ്രക്രിയയുടെ ഭാഗമായി ഉറവിട ഫയലുകൾ ഉപയോഗിക്കുക.
ആദ്യം, നിങ്ങളുടേത് സൃഷ്ടിച്ച് ബിൽറ്റ്-ഇൻ ഇഷ്ടാനുസൃത വേരിയബിളുകൾ_custom.scss
അസാധുവാക്കാൻ അത് ഉപയോഗിക്കുക . തുടർന്ന്, നിങ്ങളുടെ ഇഷ്ടാനുസൃത വേരിയബിളുകൾ ഇറക്കുമതി ചെയ്യാൻ നിങ്ങളുടെ പ്രധാന Sass ഫയൽ ഉപയോഗിക്കുക, തുടർന്ന് ബൂട്ട്സ്ട്രാപ്പ്:
@import "custom";
@import "~bootstrap/scss/bootstrap";
ബൂട്ട്സ്ട്രാപ്പ് കംപൈൽ ചെയ്യുന്നതിനായി, ആവശ്യമായ ലോഡറുകൾ ഇൻസ്റ്റാൾ ചെയ്ത് ഉപയോഗിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക: sass- loader , postcss-loader with Autoprefixer . കുറഞ്ഞ സജ്ജീകരണത്തിൽ, നിങ്ങളുടെ വെബ്പാക്ക് കോൺഫിഗറേഷനിൽ ഈ നിയമമോ സമാനമായതോ ഉണ്ടായിരിക്കണം:
// ...
{
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 ഇറക്കുമതി ചെയ്യുന്നു
പകരമായി, നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ എൻട്രി പോയിന്റിലേക്ക് ഈ വരി ചേർത്തുകൊണ്ട് നിങ്ങൾക്ക് ബൂട്ട്സ്ട്രാപ്പിന്റെ ഉപയോഗിക്കാൻ തയ്യാറുള്ള CSS ഉപയോഗിക്കാം:
import 'bootstrap/dist/css/bootstrap.min.css';
ഈ സാഹചര്യത്തിൽ, നിങ്ങൾക്ക് സ്റ്റൈൽ-ലോഡറും css- ലോഡറുംcss
ആവശ്യമില്ലെങ്കിൽ, വെബ്പാക്ക് കോൺഫിഗറേഷനിൽ പ്രത്യേക മാറ്റങ്ങളൊന്നും കൂടാതെ നിങ്ങളുടെ നിലവിലുള്ള നിയമം ഉപയോഗിക്കാം .sass-loader
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...