Webpack ва бастаҳо

Насб кардани Bootstrap

Бо истифода аз npm bootstrap -ро ҳамчун модули Node.js насб кунед.

Воридоти JavaScript

JavaScript-и Bootstrap-ро тавассути илова кардани ин сатр ба нуқтаи вуруди барномаатон ворид кунед (одатан index.jsё app.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';

Bootstrap аз Popper вобаста аст , ки дар peerDependenciesамвол нишон дода шудааст. Ин маънои онро дорад, ки шумо бояд боварӣ ҳосил кунед, ки онро ба package.jsonистифодаи худ илова кунед npm install @popperjs/core.

Воридоти услубҳо

Воридоти Sass-и пешакӣ тартибдодашуда

Барои баҳрабардорӣ аз потенсиали пурраи Bootstrap ва мутобиқ кардани он ба эҳтиёҷоти худ, файлҳои манбаъро ҳамчун як қисми раванди бастабандии лоиҳаи худ истифода баред.

Аввалан, худатонро эҷод кунед ва онро барои иваз кардани тағирёбандаҳои фармоишии дарунсохт_custom.scss истифода баред . Пас, файли асосии Sass-и худро барои ворид кардани тағирёбандаҳои фармоишии худ ва пас аз Bootstrap истифода баред:

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

Барои тартиб додани 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-и барои истифода омодаи Bootstrap-ро тавассути илова кардани ин сатр ба нуқтаи вуруди лоиҳаи худ истифода баред:

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

Дар ин ҳолат шумо метавонед қоидаи мавҷудаи худро барои cssбе ягон тағйироти махсус дар конфигуратсияи webpack истифода баред, ба истиснои шумо sass-loaderтанҳо style-loader ва css-loader лозим нест.

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