وێبپاک

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

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

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

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

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

import 'bootstrap';

یان دەتوانیت بە تاک پێوەکراوەکان هاوردە بکەیت بەپێی پێویست:

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

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

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