ਵੈਬਪੈਕ

ਵੈਬਪੈਕ 3 ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਸਿੱਖੋ।

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

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

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।

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

ਪ੍ਰੀਕੰਪਾਈਲਡ 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 ਆਯਾਤ ਕਰਨਾ

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

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

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

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