ਵੈਬਪੈਕ ਅਤੇ ਬੰਡਲ

ਬੂਟਸਟਰੈਪ ਇੰਸਟਾਲ ਕਰਨਾ

npm ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬੂਟਸਟਰੈਪ ਨੂੰ Node.js ਮੋਡੀਊਲ ਵਜੋਂ ਸਥਾਪਿਤ ਕਰੋ।

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।

ਸਟਾਈਲ ਆਯਾਤ ਕਰਨਾ

ਪ੍ਰੀਕੰਪਾਈਲਡ Sass ਨੂੰ ਆਯਾਤ ਕਰਨਾ

ਬੂਟਸਟਰੈਪ ਦੀ ਪੂਰੀ ਸੰਭਾਵਨਾ ਦਾ ਆਨੰਦ ਲੈਣ ਅਤੇ ਇਸਨੂੰ ਤੁਹਾਡੀਆਂ ਲੋੜਾਂ ਅਨੁਸਾਰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ, ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੀ ਬੰਡਲਿੰਗ ਪ੍ਰਕਿਰਿਆ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਸਰੋਤ ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਪਹਿਲਾਂ, ਆਪਣਾ ਬਣਾਓ ਅਤੇ ਬਿਲਟ-ਇਨ ਕਸਟਮ ਵੇਰੀਏਬਲ_custom.scss ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ ਇਸਦੀ ਵਰਤੋਂ ਕਰੋ । ਫਿਰ, ਆਪਣੇ ਕਸਟਮ ਵੇਰੀਏਬਲ ਨੂੰ ਆਯਾਤ ਕਰਨ ਲਈ ਆਪਣੀ ਮੁੱਖ Sass ਫਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰੋ, ਬੂਟਸਟਰੈਪ ਤੋਂ ਬਾਅਦ:

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

ਬੂਟਸਟਰੈਪ ਨੂੰ ਕੰਪਾਇਲ ਕਰਨ ਲਈ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਲੋੜੀਂਦੇ ਲੋਡਰਾਂ ਨੂੰ ਇੰਸਟਾਲ ਅਤੇ ਵਰਤਦੇ ਹੋ: sass- loader , postcss-loader Autoprefixer ਨਾਲ । ਘੱਟੋ-ਘੱਟ ਸੈੱਟਅੱਪ ਦੇ ਨਾਲ, ਤੁਹਾਡੇ ਵੈਬਪੈਕ ਸੰਰਚਨਾ ਵਿੱਚ ਇਹ ਨਿਯਮ ਜਾਂ ਸਮਾਨ ਸ਼ਾਮਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ:

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

ਕੰਪਾਇਲਡ CSS ਆਯਾਤ ਕਰਨਾ

ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੇ ਐਂਟਰੀ ਪੁਆਇੰਟ ਵਿੱਚ ਇਸ ਲਾਈਨ ਨੂੰ ਜੋੜ ਕੇ ਬੂਟਸਟਰੈਪ ਦੀ ਵਰਤੋਂ ਲਈ ਤਿਆਰ CSS ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ:

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

ਇਸ ਸਥਿਤੀ ਵਿੱਚ ਤੁਸੀਂ ਵੈੱਬਪੈਕ ਸੰਰਚਨਾ ਵਿੱਚ ਬਿਨਾਂ ਕਿਸੇ ਵਿਸ਼ੇਸ਼ ਸੋਧਾਂ ਦੇ ਆਪਣੇ ਮੌਜੂਦਾ ਨਿਯਮ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ , ਸਿਵਾਏ ਤੁਹਾਨੂੰ ਸਿਰਫ਼ ਸ਼ੈਲੀ-ਲੋਡਰ ਅਤੇ css-css ਲੋਡਰ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ ।sass-loader

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