ވެބްޕެކް އަދި ބަންޑްލަރސް އެވެ
ވެބްޕެކް ނުވަތަ އެހެން ބަންޑްލަރުތައް ބޭނުންކޮށްގެން ޕްރޮޖެކްޓްގައި ބޫޓްސްޓްރެޕް ހިމަނާނެ ގޮތް ދަސްކުރައްވާށެވެ.
ބޫޓްސްޓްރެޕް އިންސްޓޯލް ކުރުން
npm ބޭނުންކޮށްގެން ނޯޑް.ޖޭއެސް މޮޑިއުލެއްގެ ގޮތުގައި ބޫޓްސްޓްރަޕް އިންސްޓޯލް ކުރާށެވެ .
ޖާވާސްކްރިޕްޓް އިމްޕޯޓް ކުރަނީ
އެޕްގެ އެންޓްރީ ޕޮއިންޓަށް މި ލައިން އިތުރުކޮށްގެން ބޫޓްސްޓްރެޕްގެ ޖާވާސްކްރިޕްޓް އިމްޕޯޓް ކުރައްވާ (އާންމުކޮށް 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
އޯވަރރައިޑް ކުރުމަށް ބޭނުން ކުރާށެވެ . ދެން، ކަސްޓަމް ވެރިއޭބަލްތައް އިމްޕޯޓް ކުރުމަށް ތިބާގެ މައިގަނޑު ސާސް ފައިލް ބޭނުންކޮށްގެން، އޭގެ ފަހުން ބޫޓްސްޓްރެޕް:
@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'
}]
}
// ...
ކޮމްޕައިލްޑް ސީއެސްއެސް އިމްޕޯޓްކުރުން
ނުވަތަ، ތިބާގެ ޕްރޮޖެކްޓްގެ އެންޓްރީ ޕޮއިންޓަށް މި ލައިން އިތުރުކޮށްގެން ބޫޓްސްޓްރެޕްގެ ރެޑީ ޓު ޔޫސް ސީއެސްއެސް ބޭނުންކުރެވިދާނެއެވެ:
import 'bootstrap/dist/css/bootstrap.min.css';
މި ހާލަތުގައި ތިބާގެ މިހާރުގެ އުސޫލު ބޭނުންކުރެވިދާނެ ވެބްޕެކް ކޮންފިގްއަށް އެއްވެސް ޚާއްޞަ ބަދަލެއް ނުގެނެސް، ހަމައެކަނި ސްޓައިލް-ލޯޑަރ އަދި ސީއެސްއެސް-ލޯޑަރcss
ބޭނުން ނުވާ ފިޔަވައި .sass-loader
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...