ವೆಬ್‌ಪ್ಯಾಕ್ ಮತ್ತು ಬಂಡಲರ್‌ಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸ್ಥಾಪಿಸಲಾಗುತ್ತಿದೆ

npm ಬಳಸಿಕೊಂಡು Node.js ಮಾಡ್ಯೂಲ್ ಆಗಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿ .

JavaScript ಅನ್ನು ಆಮದು ಮಾಡಲಾಗುತ್ತಿದೆ

ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಪ್ರವೇಶ ಬಿಂದುವಿಗೆ ಈ ಸಾಲನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ 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.

ಆಮದು ಶೈಲಿಗಳು

ಪ್ರಿಕಂಪೈಲ್ಡ್ ಸಾಸ್ ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲಾಗುತ್ತಿದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಆನಂದಿಸಲು ಮತ್ತು ಅದನ್ನು ನಿಮ್ಮ ಅಗತ್ಯಗಳಿಗೆ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು, ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನ ಬಂಡಲಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯ ಭಾಗವಾಗಿ ಮೂಲ ಫೈಲ್‌ಗಳನ್ನು ಬಳಸಿ.

ಮೊದಲಿಗೆ, ನಿಮ್ಮದೇ ಆದದನ್ನು ರಚಿಸಿ ಮತ್ತು ಅಂತರ್ನಿರ್ಮಿತ ಕಸ್ಟಮ್ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು_custom.scss ಅತಿಕ್ರಮಿಸಲು ಅದನ್ನು ಬಳಸಿ . ನಂತರ, ನಿಮ್ಮ ಕಸ್ಟಮ್ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಮುಖ್ಯ ಸಾಸ್ ಫೈಲ್ ಅನ್ನು ಬಳಸಿ, ನಂತರ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್:

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

ಕಂಪೈಲ್ ಮಾಡಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ಗಾಗಿ, ನೀವು ಅಗತ್ಯವಿರುವ ಲೋಡರ್‌ಗಳನ್ನು ಸ್ಥಾಪಿಸಿ ಮತ್ತು ಬಳಸುತ್ತೀರೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ: ಸಾಸ್ -ಲೋಡರ್ , ಆಟೋಪ್ರಿಫಿಕ್ಸರ್‌ನೊಂದಿಗೆ ಪೋಸ್ಟ್‌ಸಿಎಸ್‌ಎಸ್- ಲೋಡರ್ . ಕನಿಷ್ಠ ಸೆಟಪ್‌ನೊಂದಿಗೆ, ನಿಮ್ಮ ವೆಬ್‌ಪ್ಯಾಕ್ ಸಂರಚನೆಯು ಈ ನಿಯಮವನ್ನು ಒಳಗೊಂಡಿರಬೇಕು ಅಥವಾ ಅಂತಹುದೇ:

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