வெப்பேக் மற்றும் பண்ட்லர்கள்
Webpack அல்லது பிற பண்ட்லர்களைப் பயன்படுத்தி உங்கள் திட்டத்தில் பூட்ஸ்டார்ப்பை எவ்வாறு சேர்ப்பது என்பதை அறிக.
பூட்ஸ்டார்ப்பை நிறுவுகிறது
npm ஐப் பயன்படுத்தி ஒரு Node.js தொகுதியாக பூட்ஸ்ட்ராப்பை நிறுவவும் .
JavaScript ஐ இறக்குமதி செய்கிறது
உங்கள் பயன்பாட்டின் நுழைவுப் புள்ளியில் (பொதுவாக அல்லது ) இந்த வரியைச் சேர்ப்பதன் மூலம் பூட்ஸ்டார்ப்பின் ஜாவாஸ்கிரிப்டை இறக்குமதி செய்யவும்:index.js
app.js
import 'bootstrap';
// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';
மாற்றாக, எங்கள் செருகுநிரல்களில் சில மட்டுமே உங்களுக்குத் தேவைப்பட்டால், தேவைக்கேற்ப தனித்தனியாக செருகுநிரல்களை இறக்குமதி செய்யலாம் :
import Alert from 'bootstrap/js/dist/alert';
// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';
பூட்ஸ்ட்ராப் பாப்பரைச் சார்ந்தது , இது 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
தேவையில்லை தவிர, வெப்பேக் கட்டமைப்பில் எந்த சிறப்பு மாற்றங்களும் இல்லாமல் உங்கள் தற்போதைய விதியைப் பயன்படுத்தலாம் .sass-loader
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...