Webpack እና ጥቅሎች
Webpackን ወይም ሌሎች ቅርቅቦችን በመጠቀም ቡትስትራፕን በፕሮጀክትዎ ውስጥ እንዴት ማካተት እንደሚችሉ ይወቁ።
Bootstrapን በመጫን ላይ
npm በመጠቀም bootstrap ን እንደ Node.js ሞጁል ጫን።
ጃቫስክሪፕት በማስመጣት ላይ
ይህንን መስመር ወደ መተግበሪያዎ የመግቢያ ነጥብ በማከል የBootstrapን ጃቫስክሪፕት ያስመጡ (ብዙውን ጊዜ index.js
ወይም app.js
):
// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';
በአማራጭ፣ ከኛ ተሰኪዎች ውስጥ ጥቂቶቹን ብቻ ከፈለጉ፣ እንደ አስፈላጊነቱ ፕለጊኖችን ለየብቻ ማስመጣት ይችላሉ።
import Alert from 'bootstrap/js/dist/alert';
...
Bootstrap በንብረቱ ውስጥ በተገለፀው በፖፐር ላይ የተመሰረተ ነው . ይህ ማለት ወደ እርስዎ መጠቀም peerDependencies
ማከልዎን ማረጋገጥ አለብዎት ማለት ነው .package.json
npm install @popperjs/core
ቅጦችን በማስመጣት ላይ
ቀድሞ የተጠናቀረ Sass በማስመጣት ላይ
በBootstrap ሙሉ አቅም ለመደሰት እና ለፍላጎትዎ ለማበጀት የምንጭ ፋይሎችን እንደ የፕሮጀክትዎ ማጠቃለያ ሂደት አካል ይጠቀሙ።
በመጀመሪያ የራስዎን ይፍጠሩ እና አብሮ የተሰሩ ብጁ ተለዋዋጮችን_custom.scss
ለመሻር ይጠቀሙበት ። ከዚያ፣ ብጁ ተለዋዋጮችዎን ለማስመጣት ዋናውን የSass ፋይል ይጠቀሙ፣ ከዚያ በኋላ ቡትስትራፕ፡-
@import "custom";
@import "~bootstrap/scss/bootstrap";
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'
}]
}
// ...
የተጠናቀረ ሲኤስኤስን በማስመጣት ላይ
በአማራጭ፣ ይህንን መስመር በቀላሉ ወደ የፕሮጀክትዎ መግቢያ ነጥብ በማከል ለአገልግሎት ዝግጁ የሆነውን የBootstrapን CSS መጠቀም ይችላሉ።
import 'bootstrap/dist/css/bootstrap.min.css';
በዚህ አጋጣሚ ያለ ምንም ልዩ ማሻሻያ በዌብፓክ ማዋቀር ላይ ያለውን ህግ መጠቀም ትችላለህ ፣ ስታይል ጫኚ እና css - loader ብቻ css
ካላስፈለገህ በስተቀር ።sass-loader
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...