ویب پیک

Webpack 3 کا استعمال کرتے ہوئے اپنے پروجیکٹ میں بوٹسٹریپ کو شامل کرنے کا طریقہ سیکھیں۔

بوٹسٹریپ انسٹال کرنا

npm کا استعمال کرتے ہوئے بوٹسٹریپ کو Node.js ماڈیول کے طور پر انسٹال کریں۔

جاوا اسکرپٹ درآمد کرنا

اس لائن کو اپنے ایپ کے انٹری پوائنٹ میں شامل کرکے بوٹسٹریپ کا جاوا اسکرپٹ درآمد کریں (عام طور پر 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اور اسے بلٹ ان حسب ضرورت متغیرات کو اوور رائڈ کرنے کے لیے استعمال کریں ۔ پھر، اپنے حسب ضرورت متغیرات کو درآمد کرنے کے لیے اپنی مین ساس فائل کا استعمال کریں، اس کے بعد بوٹسٹریپ:

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

بوٹسٹریپ کو مرتب کرنے کے لیے، یقینی بنائیں کہ آپ مطلوبہ لوڈرز انسٹال اور استعمال کرتے ہیں: sass-loader ، postcss-loader with 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
    }]
  },
  ...

مرتب شدہ سی ایس ایس درآمد کرنا

متبادل طور پر، آپ بوٹسٹریپ کے استعمال کے لیے تیار سی ایس ایس کو اپنے پروجیکٹ کے انٹری پوائنٹ میں صرف اس لائن کو شامل کر کے استعمال کر سکتے ہیں:

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

اس صورت میں آپ اپنے موجودہ اصول کو ویب پیک کنفیگریشن میں کسی خاص ترمیم کے بغیر استعمال کر سکتے ہیں سوائے اس کے کہ آپ کو صرف style-loader اور css-loadercss کی ضرورت نہیں ہے ۔sass-loader

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