Webpack
למד כיצד לכלול Bootstrap בפרויקט שלך באמצעות Webpack.
התקנת Bootstrap
התקן את Bootstrap כמודול Node.js באמצעות npm.
ייבוא JavaScript
ייבא את JavaScript של Bootstrap על ידי הוספת שורה זו לנקודת הכניסה של האפליקציה שלך (בדרך כלל index.js
או app.js
):
import 'bootstrap';
לחלופין, תוכל לייבא תוספים בנפרד לפי הצורך:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap תלוי ב- jQuery וב- Popper , המצוינים peerDependencies
במאפיין; זה אומר שתצטרך להקפיד להוסיף את שניהם package.json
לשימוש שלך npm install --save jquery popper.js
.
ייבוא סגנונות
ייבוא Sass Precompiled
כדי ליהנות ממלוא הפוטנציאל של Bootstrap ולהתאים אותו לצרכים שלך, השתמש בקבצי המקור כחלק מתהליך האגד של הפרויקט שלך.
ראשית, צור משלך _custom.scss
והשתמש בו כדי לעקוף את המשתנים המובנים המותאמים אישית . לאחר מכן, השתמש בקובץ Sass הראשי שלך כדי לייבא את המשתנים המותאמים אישית שלך, ואחריו את Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
כדי שה-Bootstrap יקמפל, הקפד להתקין ולהשתמש במעמיסים הנדרשים: sass-loader , postcss-loader עם 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
}]
},
...
ייבוא CSS מהול
לחלופין, תוכל להשתמש ב-CSS המוכן לשימוש של Bootstrap פשוט על ידי הוספת שורה זו לנקודת הכניסה של הפרויקט שלך:
import 'bootstrap/dist/css/bootstrap.min.css';
במקרה זה אתה יכול להשתמש בכלל הקיים שלך css
ללא כל שינויים מיוחדים בתצורת webpack, אלא שאתה לא צריך sass-loader
רק style-loader ו- css-loader .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...