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