ވެބްޕެކް އެވެ
ވެބްޕެކް ބޭނުންކޮށްގެން ޕްރޮޖެކްޓްގައި ބޫޓްސްޓްރެޕް ހިމަނާނެ ގޮތް ދަސްކުރައްވާށެވެ.
ބޫޓްސްޓްރެޕް އިންސްޓޯލް ކުރުން
npm ބޭނުންކޮށްގެން ނޯޑް.ޖޭއެސް މޮޑިއުލެއްގެ ގޮތުގައި ބޫޓްސްޓްރަޕް އިންސްޓޯލް ކުރާށެވެ .
ޖާވާސްކްރިޕްޓް އިމްޕޯޓް ކުރަނީ
އެޕްގެ އެންޓްރީ ޕޮއިންޓަށް މި ލައިން އިތުރުކޮށްގެން ބޫޓްސްޓްރެޕްގެ ޖާވާސްކްރިޕްޓް އިމްޕޯޓް ކުރައްވާ (އާންމުކޮށް index.js
ނުވަތަ app.js
):
import 'bootstrap';
ނުވަތަ، ބޭނުންވާ ގޮތަށް ވަކިވަކިން ޕްލަގިންސް އިމްޕޯޓް ކުރެވިދާނެއެވެ :
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
ބޫޓްސްޓްރަޕް ޑިޕެންޑް ކުރަނީ ޕްރޮޕަޓީގައި ކަނޑައެޅިފައިވާ jQuery އަދި PopperpeerDependencies
އަށް ؛ މާނައަކީ ތިބާގެ package.json
ބޭނުން ކުރުމަށް އެ ދެ އެއްޗެއް ވެސް އިތުރު ކުރަން ޔަޤީން ކުރަން ޖެހޭނެ ކަމެވެ npm install --save jquery popper.js
.
ސްޓައިލްސް އިމްޕޯޓްކުރުން
ޕްރީކޮމްޕައިލްޑް ސާސް އިމްޕޯޓް ކުރުން
ބޫޓްސްޓްރެޕްގެ ފުރިހަމަ ޕޮޓެންޝަލް ލިބި، ބޭނުންވާ ގޮތަށް ކަސްޓަމައިޒް ކުރުމަށްޓަކައި، ޕްރޮޖެކްޓްގެ ބަންޑްލިންގ ޕްރޮސެސްގެ ބައެއްގެ ގޮތުގައި ސޯސް ފައިލްތައް ބޭނުން ކުރާށެވެ.
ފުރަތަމަ އަމިއްލައަށް އުފައްދައިގެން ބިލްޓް-އިން ކަސްޓަމް ވެރިއޭބަލްސް_custom.scss
އޯވަރރައިޑް ކުރުމަށް ބޭނުން ކުރާށެވެ . ދެން، ކަސްޓަމް ވެރިއޭބަލްތައް އިމްޕޯޓް ކުރުމަށް ތިބާގެ މައިގަނޑު ސާސް ފައިލް ބޭނުންކޮށްގެން، އޭގެ ފަހުން ބޫޓްސްޓްރެޕް:
@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
}]
},
...
ކޮމްޕައިލްޑް ސީއެސްއެސް އިމްޕޯޓްކުރުން
ނުވަތަ، ތިބާގެ ޕްރޮޖެކްޓްގެ އެންޓްރީ ޕޮއިންޓަށް މި ލައިން އިތުރުކޮށްގެން ބޫޓްސްޓްރެޕްގެ ރެޑީ ޓު ޔޫސް ސީއެސްއެސް ބޭނުންކުރެވިދާނެއެވެ:
import 'bootstrap/dist/css/bootstrap.min.css';
މި ހާލަތުގައި ތިބާގެ މިހާރުގެ އުސޫލު ބޭނުންކުރެވިދާނެ ވެބްޕެކް ކޮންފިގްއަށް އެއްވެސް ޚާއްޞަ ބަދަލެއް ނުގެނެސް، ހަމައެކަނި ސްޓައިލް-ލޯޑަރ އަދި ސީއެސްއެސް-ލޯޑަރcss
ބޭނުން ނުވާ ފިޔަވައި .sass-loader
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...