ዌብፓክን ባንድለራትን
Webpack ወይ ካልኦት bundlers ተጠቂምካ Bootstrap ኣብ ፕሮጀክትካ ከመይ ጌርካ ከም እተእትዎ ተማሃር።
ምትካል ቡትስትራፕ
bootstrap ከም Node.js ሞዱል npm ብምጥቃም ንጽዓኖ።
ጃቫስክሪፕት ካብ ወጻኢ ምእታው
ነዚ መስመር ኣብቲ ናይ ኣፕካ መእተዊ ነጥቢ ብምውሳኽ ናይ 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';
...
ቡትስትራፕ ኣብ ፖፐር ይምርኮስ ፣ እዚ ድማ ኣብቲ peerDependencies
ንብረት ተገሊጹ ኣሎ። package.json
እዚ ማለት ኣብ ኣጠቓቕማኻ ምውሳኽካ ከተረጋግጽ ክትግደድ ኢኻ npm install @popperjs/core
።
ቅዲታት ምእታው
ቅድሚኡ ዝተጠርነፈ ሳስ ምእታው
ምሉእ ዓቕሚ ቡትስትራፕ ንምስትምቓርን ምስ ድሌታትካ ንምምዕርራይን፡ ነቶም ምንጪ ፋይላት ከም ኣካል ናይቲ ፕሮጀክትካ መስርሕ ምትእኽኻብ ተጠቐመሎም።
መጀመርታ ናትካ ፍጠር እሞ ነቶም ኣብ ውሽጢ ዝተሃንጹ ብሕታዊ ተቐያየርቲ_custom.scss
ንምግዳፍ ተጠቐመሎም ። ድሕሪኡ፡ ነቲ ቀንዲ Sass ፋይልካ ተጠቒምካ ብሕታዊ ተለዋዋጢ ረቛሒታትካ ኣእቱ፡ ድሕሪኡ Bootstrap ይስዕብ፤
@import "custom";
@import "~bootstrap/scss/bootstrap";
ቡትስትራፕ ንኽጥርንፍ፡ ዘድልዩ ሎደርስ ከም እትተክልን ከም እትጥቀመሉን ኣረጋግጽ ፡ sass-loader , postcss-loader ምስ Autoprefixer ። ምስ ዝተሓተ ምድላው፡ ናትካ webpack config ነዚ ሕጊ ወይ ተመሳሳሊ ከጠቓልል ኣለዎ፤
// ...
{
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';
ኣብዚ ጉዳይ እዚ ነቲ ዝጸንሐ ሕግኻ ብዘይ ዝኾነ ፍሉይ ምምሕያሽ ኣብ webpack config ክትጥቀመሉ ትኽእል ኢኻ፣ ብዘይካ style-loader ን css- loaderን ጥራይ css
ዘየድልየካ ።sass-loader
// ...
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
// ...