وێبپاک

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

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

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

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

جاڤاسکڕێپتی 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

بۆ ئەوەی چێژ لە توانای تەواوی بووتستراپ وەربگریت و بەپێی پێویستیەکانت خۆت دروستی بکەیت، فایلە سەرچاوەییەکان وەک بەشێک لە پرۆسەی کۆکردنەوەی پڕۆژەکەت بەکاربهێنە.

سەرەتا خۆت دروست بکە _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بەبێ هیچ گۆڕانکارییەکی تایبەت بۆ ڕێکخستنی وێبپاک، تەنها پێویستت بە sass-loaderتەنها style-loader و css-loader نییە .

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