ويب پيڪ

سکو ته ڪيئن شامل ڪجي Bootstrap پنهنجي پروجيڪٽ ۾ Webpack 3 استعمال ڪندي.

Bootstrap انسٽال ڪرڻ

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

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

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

import 'bootstrap';

متبادل طور تي، توھان انفرادي طور تي پلگ ان درآمد ڪري سگھو ٿا جيئن ضرورت آھي:

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

بوٽ اسٽريپ jQuery ۽ Popper تي منحصر آهي ، انهن جي وضاحت ڪئي وئي آهي peerDependencies، ان جو مطلب اهو آهي ته توهان کي انهن ٻنهي کي توهان جي package.jsonاستعمال ۾ شامل ڪرڻ جي پڪ ڪرڻي پوندي npm install --save jquery popper.js.

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

Precompiled Sass درآمد ڪرڻ

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

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

@import "custom";
@import "~bootstrap/scss/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 درآمد ڪرڻ

متبادل طور تي، توھان استعمال ڪري سگھوٿا Bootstrap جي استعمال لاءِ تيار ڪيل CSS صرف ھن لائن کي پنھنجي پروجيڪٽ جي داخلا پوائنٽ ۾ شامل ڪندي:

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