முக்கிய உள்ளடக்கத்திற்கு செல்க டாக்ஸ் வழிசெலுத்தலுக்கு செல்க
in English

வெப்பேக் மற்றும் பண்ட்லர்கள்

Webpack அல்லது பிற பண்ட்லர்களைப் பயன்படுத்தி உங்கள் திட்டத்தில் பூட்ஸ்டார்ப்பை எவ்வாறு சேர்ப்பது என்பதை அறிக.

பூட்ஸ்டார்ப்பை நிறுவுகிறது

npm ஐப் பயன்படுத்தி ஒரு Node.js தொகுதியாக பூட்ஸ்ட்ராப்பை நிறுவவும் .

JavaScript ஐ இறக்குமதி செய்கிறது

உங்கள் பயன்பாட்டின் நுழைவுப் புள்ளியில் (பொதுவாக அல்லது ) இந்த வரியைச் சேர்ப்பதன் மூலம் பூட்ஸ்டார்ப்பின் ஜாவாஸ்கிரிப்டை இறக்குமதி செய்யவும்:index.jsapp.js

import 'bootstrap';

// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';

மாற்றாக, எங்கள் செருகுநிரல்களில் சில மட்டுமே உங்களுக்குத் தேவைப்பட்டால், தேவைக்கேற்ப தனித்தனியாக செருகுநிரல்களை இறக்குமதி செய்யலாம் :

import Alert from 'bootstrap/js/dist/alert';

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap';

பூட்ஸ்ட்ராப் பாப்பரைச் சார்ந்தது , இது peerDependenciesசொத்தில் குறிப்பிடப்பட்டுள்ளது. package.jsonஇதன் பொருள் நீங்கள் அதை உங்கள் பயன்பாட்டிற்குச் சேர்ப்பதை உறுதிசெய்ய வேண்டும் npm install @popperjs/core.

பாங்குகளை இறக்குமதி செய்கிறது

முன்தொகுக்கப்பட்ட சாஸை இறக்குமதி செய்கிறது

பூட்ஸ்டார்ப்பின் முழு���் திறனையும் அனுபவிப்பதற்கும், உங்கள் தேவைக்கேற்ப தனிப்பயனாக்குவதற்கும், உங்கள் திட்டத்தின் தொகுப்பாக்க செயல்முறையின் ஒரு பகுதியாக மூலக் கோப்புகளைப் பயன்படுத்தவும்.

முதலில், சொந்தமாக உருவாக்கி , உள்ளமைக்கப்பட்ட தனிப்பயன் மாறிகளை_custom.scss மேலெழுத அதைப் பயன்படுத்தவும் . பின்னர், உங்கள் தனிப்பயன் மாறிகளை இறக்குமதி செய்ய உங்கள் முக்கிய Sass கோப்பைப் பயன்படுத்தவும், அதைத் தொடர்ந்து பூட்ஸ்டார்ப்:

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

பூட்ஸ்டார்ப் தொகுக்க, தேவையான ஏற்றிகளை நிறுவி பயன்படுத்துவதை உறுதி செய்து கொள்ளவும்: sass-loader , postcss-loader with 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தேவையில்லை தவிர, வெப்பேக் கட்டமைப்பில் எந்த சிறப்பு மாற்றங்களும் இல்லாமல் உங்கள் தற்போதைய விதியைப் பயன்படுத்தலாம் .sass-loader

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