דלג לתוכן הראשי דלג לניווט במסמכים
in English

Webpack ובונדלר

למד כיצד לכלול Bootstrap בפרויקט שלך באמצעות Webpack או חבילות אחרות.

בעמוד זה

התקנת Bootstrap

התקן את Bootstrap כמודול Node.js באמצעות npm.

ייבוא ​​JavaScript

ייבא את JavaScript של Bootstrap על ידי הוספת שורה זו לנקודת הכניסה של האפליקציה שלך (בדרך כלל 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 תלוי ב- Popper , שצוין peerDependenciesבנכס. המשמעות היא שתצטרך להקפיד להוסיף אותו package.jsonלשימוש שלך npm install @popperjs/core.

ייבוא ​​סגנונות

ייבוא ​​Sass Precompiled

כדי ליהנות ממלוא הפוטנציאל של Bootstrap ולהתאים אותו לצרכים שלך, השתמש בקבצי המקור כחלק מתהליך האגד של הפרויקט שלך.

ראשית, צור משלך _custom.scssוהשתמש בו כדי לעקוף את המשתנים המובנים המותאמים אישית . לאחר מכן, השתמש בקובץ Sass הראשי שלך כדי לייבא את המשתנים המותאמים אישית שלך, ואחריו את Bootstrap:

@import "custom";
@import "~bootstrap/scss/bootstrap";

כדי שה-Bootstrap יקמפל, הקפד להתקין ולהשתמש במעמיסים הנדרשים: sass-loader , postcss-loader עם 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'
  }]
}
// ...

ייבוא ​​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'
      ]
    }
  ]
}
// ...