പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്‌സ് നാവിഗേഷനിലേക്ക് പോകുക
in English

വെബ്‌പാക്കും ബണ്ടലറുകളും

Webpack അല്ലെങ്കിൽ മറ്റ് ബണ്ടലറുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ പ്രോജക്റ്റിൽ ബൂട്ട്സ്ട്രാപ്പ് ഉൾപ്പെടുത്തുന്നത് എങ്ങനെയെന്ന് അറിയുക.

ബൂട്ട്സ്ട്രാപ്പ് ഇൻസ്റ്റാൾ ചെയ്യുന്നു

npm ഉപയോഗിച്ച് ഒരു Node.js മൊഡ്യൂളായി bootstrap ഇൻസ്റ്റാൾ ചെയ്യുക .

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 അസാധുവാക്കാൻ അത് ഉപയോഗിക്കുക . തുടർന്ന്, നിങ്ങളുടെ ഇഷ്‌ടാനുസൃത വേരിയബിളുകൾ ഇറക്കുമതി ചെയ്യാൻ നിങ്ങളുടെ പ്രധാന 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- ലോഡറുംcss ആവശ്യമില്ലെങ്കിൽ, വെബ്‌പാക്ക് കോൺഫിഗറേഷനിൽ പ്രത്യേക മാറ്റങ്ങളൊന്നും കൂടാതെ നിങ്ങളുടെ നിലവിലുള്ള നിയമം ഉപയോഗിക്കാം .sass-loader

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