باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

وێبپاک و باندلەرەکان

فێربە چۆن Bootstrap لە پرۆژەکەتدا دابنێیت بە بەکارهێنانی Webpack یان باندلەری تر.

دامەزراندنی Bootstrap

bootstrap وەک مۆدیولێکی Node.js بە بەکارهێنانی npm دابنێ.

هاوردەکردنی جاڤاسکڕێپت

جاڤاسکڕێپتی Bootstrap هاوردە بکە بە زیادکردنی ئەم دێڕە بۆ خاڵی چوونە ژوورەوەی ئەپەکەت (بەزۆری index.jsیان app.js):

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

یان ئەگەر تەنها پێویستت بە چەند پێوەکراوەکانمانە، دەتوانیت پێوەکراوەکان بە تاک هاوردە بکەیت بەپێی پێویست:

import Alert from 'bootstrap/js/dist/alert';
...

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 ی ئامادەکراوی Bootstrap بەکاربهێنیت بە تەنها زیادکردنی ئەم دێڕە بۆ خاڵی چوونەژوورەوەی پڕۆژەکەت:

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

لەم حاڵەتەدا دەتوانیت یاسای ئێستات بەکاربهێنیت بۆ cssبەبێ هیچ گۆڕانکارییەکی تایبەت بۆ ڕێکخستنی وێبپاک، تەنها پێویستت بە sass-loaderتەنها style-loader و css-loader نییە .

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