Вебпакеттер жана пакеттер

Bootstrap орнотулууда

Bootstrap'ты npm аркылуу Node.js модулу катары орнотуңуз .

JavaScript импорттоо

Бул сапты колдонмоңуздун кирүү чекитине кошуу менен Bootstrap'тин 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';
...

Bootstrap касиетте көрсөтүлгөн Попперге көз каранды . peerDependenciesБул сиз аны package.jsonколдонууңузга кошууну текшеришиңиз керек дегенди билдирет npm install @popperjs/core.

Стилдерди импорттоо

Алдын ала түзүлгөн Sass импорттоо

Bootstrap'тин толук мүмкүнчүлүктөрүнөн ырахат алуу жана аны өз муктаждыктарыңызга ылайыкташтыруу үчүн, баштапкы файлдарды долбооруңуздун пакеттөө процессинин бир бөлүгү катары колдонуңуз.

Биринчиден, өзүңүздүнүңүздү түзүңүз жана аны орнотулган жеке өзгөрмөлөрдү_custom.scss жокко чыгаруу үчүн колдонуңуз . Андан кийин, ыңгайлаштырылган өзгөрмөлөрүңүздү импорттоо үчүн негизги Sass файлыңызды колдонуңуз, андан кийин Bootstrap:

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

Bootstrap компиляциялоо үчүн керектүү жүктөгүчтөрдү орнотуп, колдонгонуңузду текшериңиз: sass- loader , Autoprefixer менен postcss -loader . Минималдуу орнотуу менен, веб-пакет конфигурацияңыз бул эрежени же ушул сыяктууларды камтышы керек:

// ...
{
  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 импорттоо

Же болбосо, сиз жөн гана долбооруңуздун кирүү чекитине бул сапты кошуу менен Bootstrapдин колдонууга даяр CSS'ти колдонсоңуз болот:

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

Бул учурда сиз cssвеб-пакет конфигурациясына эч кандай өзгөчө өзгөртүүлөрдү киргизбестен учурдагы эрежеңизди колдонсоңуз болот, бирок сизге sass-loaderжөн гана style-loader жана css-loader керек эмес .

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