Web paketi ve paketleyiciler

Bootstrap'i Yükleme

Bootstrap'i npm kullanarak bir Node.js modülü olarak kurun.

JavaScript'i içe aktarma

Bu satırı uygulamanızın giriş noktasına (genellikle veya ) ekleyerek Bootstrap'ın JavaScript'ini içe aktarın :index.jsapp.js

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

Alternatif olarak, eklentilerimizden yalnızca birkaçına ihtiyacınız varsa, eklentileri gerektiği gibi tek tek içe aktarabilirsiniz :

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

Bootstrap, özellikte belirtilen Popper'a bağlıdır . Bu, kullanımınıza peerDependencieseklediğinizden emin olmanız gerektiği anlamına gelir .package.jsonnpm install @popperjs/core

Stilleri İçe Aktarma

Önceden Derlenmiş Sass'ı İçe Aktarma

Bootstrap'in tüm potansiyelinden yararlanmak ve ihtiyaçlarınıza göre özelleştirmek için, projenizin paketleme sürecinin bir parçası olarak kaynak dosyaları kullanın.

İlk olarak, kendinizinkini oluşturun ve yerleşik özelleştirilebilen değişkenleri_custom.scss geçersiz kılmak için kullanın . Ardından, özel değişkenlerinizi içe aktarmak için ana Sass dosyanızı ve ardından Bootstrap'ı kullanın:

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

Bootstrap'in derlenmesi için gerekli yükleyicileri kurduğunuzdan ve kullandığınızdan emin olun: sass-loader , postcss-loader with Autoprefixer . Minimum kurulumla, web paketi yapılandırmanız bu kuralı veya benzerini içermelidir:

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

Derlenmiş CSS'yi İçe Aktarma

Alternatif olarak, projenizin giriş noktasına bu satırı ekleyerek Bootstrap'ın kullanıma hazır CSS'sini kullanabilirsiniz:

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

Bu durumda, sadece style-loader ve css-css loader'a ihtiyacınız olmaması dışında, web paketi yapılandırmasında herhangi bir özel değişiklik yapmadan için mevcut kuralınızı kullanabilirsiniz .sass-loader

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