Webpack болон багцлагч
Webpack эсвэл бусад багцуудыг ашиглан Bootstrap-ийг төсөлдөө хэрхэн оруулах талаар олж мэдээрэй.
Bootstrap суулгаж байна
Bootstrap -ийг npm ашиглан Node.js модуль болгон суулгаарай.
JavaScript импортлож байна
Энэ мөрийг өөрийн програмын нэвтрэх цэг дээр нэмж Bootstrap-ийн 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';
Bootstrap нь шинж чанарт заасан Поппероос хамаардаг peerDependencies
. Энэ нь та үүнийг package.json
ашиглахдаа заавал нэмэх хэрэгтэй болно гэсэн үг юм npm install @popperjs/core
.
Загвар импортлох
Урьдчилан эмхэтгэсэн Sass импортлох
Bootstrap-ийн бүрэн боломжийг ашиглаж, өөрийн хэрэгцээнд нийцүүлэн өөрчлөхийн тулд эх файлуудыг төслийн багцлах үйл явцын нэг хэсэг болгон ашиглаарай.
Нэгдүгээрт, өөрөө үүсгэж , үүнийг ашиглан суулгасан өөрчлөн хувьсагчдыг_custom.scss
дарж бичнэ үү . Дараа нь үндсэн Sass файлаа ашиглан өөрчлөн тохируулсан хувьсагчаа, дараа нь Bootstrap-ийг импортлоорой.
@import "custom";
@import "~bootstrap/scss/bootstrap";
Bootstrap-г хөрвүүлэхийн тулд шаардлагатай дуудагчуудыг суулгаж, ашиглахаа мартуузай: sass-loader , Autoprefixer бүхий postcss -loader . Хамгийн бага тохиргоотой бол таны вэб багцын тохиргоонд дараах дүрэм эсвэл үүнтэй төстэй байх ёстой:
// ...
{
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 импортлох
Эсвэл та Bootstrap-ийн ашиглахад бэлэн CSS-ийг төслийнхөө нэвтрэх цэгт энэ мөрийг нэмж ашиглаж болно:
import 'bootstrap/dist/css/bootstrap.min.css';
Энэ тохиолдолд та зөвхөн style-loader болон css-loadercss
шаардлагагүйгээс бусад тохиолдолд вэб багцын тохиргоонд ямар нэгэн тусгай өөрчлөлт хийхгүйгээр одоо байгаа дүрмээ ашиглаж болно .sass-loader
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...