بسته وب و باندلرها

نصب بوت استرپ

بوت استرپ را به عنوان یک ماژول Node.js با استفاده از npm نصب کنید.

وارد کردن جاوا اسکریپت

جاوا اسکریپت 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 از پیش کامپایل شده

برای لذت بردن از پتانسیل کامل بوت استرپ و سفارشی کردن آن بر اساس نیازهای خود، از فایل های منبع به عنوان بخشی از فرآیند بسته بندی پروژه خود استفاده کنید.

ابتدا، خود را ایجاد کنید _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 آماده برای استفاده بوت استرپ با افزودن این خط به نقطه ورودی پروژه خود استفاده کنید:

import 'bootstrap/dist/css/bootstrap.min.css';

در این مورد می‌توانید از قانون موجود خود cssبدون هیچ تغییر خاصی در پیکربندی بسته وب استفاده کنید، به جز اینکه sass-loaderفقط به style-loader و css-loader نیاز ندارید .

// ...
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }
  ]
}
// ...