ويب پيڪ ۽ بنڊلرز

Bootstrap انسٽال ڪرڻ

npm استعمال ڪندي Bootstrap کي Node.js ماڊل طور انسٽال ڪريو.

جاوا اسڪرپٽ درآمد ڪرڻ

Bootstrap جي JavaScript درآمد ڪريو ھن لائن کي پنھنجي ايپ جي انٽري پوائنٽ ۾ شامل ڪندي (عام طور تي index.jsيا app.js):

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

متبادل طور تي، جيڪڏهن توهان کي اسان جي صرف چند پلگ ان جي ضرورت آهي، ته توهان انفرادي طور تي پلگ ان درآمد ڪري سگهو ٿا جيئن ضرورت هجي:

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

بوٽ اسٽراپ پوپر تي منحصر آهي ، جيڪو peerDependenciesملڪيت ۾ بيان ڪيو ويو آهي. ان جو مطلب اهو آهي ته توهان کي پڪ ڪرڻو پوندو ته ان کي توهان جي package.jsonاستعمال ۾ شامل ڪيو وڃي npm install @popperjs/core.

وارداتي انداز

Precompiled Sass درآمد ڪرڻ

بوٽ اسٽريپ جي مڪمل صلاحيت مان لطف اندوز ٿيڻ ۽ ان کي پنهنجي ضرورتن مطابق ترتيب ڏيڻ لاءِ، ماخذ فائلن کي پنهنجي پروجيڪٽ جي بنڊلنگ عمل جي حصي طور استعمال ڪريو.

پهرين، پنهنجو ٺاهيو ۽ ان کي استعمال ڪرڻ لاءِ استعمال ڪريو بلٽ ان ڪسٽم متغيرن_custom.scss کي ختم ڪرڻ لاءِ . پوء، پنھنجي مکيه Sass فائل استعمال ڪريو پنھنجي ڪسٽم متغير کي درآمد ڪرڻ لاء، بعد ۾ بوٽ اسٽراپ:

@import "custom";
@import "~bootstrap/scss/bootstrap";

For Bootstrap to compile, make sure you install and use the required loaders: sass-loader, postcss-loader with Autoprefixer. With minimal setup, your webpack config should include this rule or similar:

// ...
{
  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'
  }]
}
// ...

Importing Compiled CSS

Alternatively, you may use Bootstrap’s ready-to-use CSS by simply adding this line to your project’s entry point:

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

In this case you may use your existing rule for css without any special modifications to webpack config, except you don’t need sass-loader just style-loader and css-loader.

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