بسته وب

یاد بگیرید که چگونه بوت استرپ را با استفاده از Webpack 3 در پروژه خود بگنجانید.

نصب بوت استرپ

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

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

جاوا اسکریپت Bootstrap را با افزودن این خط به نقطه ورودی برنامه خود وارد کنید (معمولاً یا index.js) app.js:

import 'bootstrap';

همچنین، می‌توانید در صورت نیاز افزونه‌ها را به‌صورت جداگانه وارد کنید:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';
...

بوت استرپ به jQuery و Popper وابسته است ، اینها به این صورت تعریف می شوند peerDependencies، به این معنی که شما باید مطمئن شوید که هر دوی آنها را به package.jsonاستفاده خود اضافه کنید npm install --save jquery popper.js.

سبک های وارداتی

وارد کردن Sass از پیش کامپایل شده

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

ابتدا، خود را ایجاد کنید _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 post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            require('autoprefixer')
          ];
        }
      }
    }, {
      loader: 'sass-loader' // compiles Sass to CSS
    }]
  },
  ...

وارد کردن CSS کامپایل شده

همچنین، می‌توانید از css آماده Bootstrap با افزودن این خط به نقطه ورودی پروژه خود استفاده کنید:

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

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

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