Web paketi

Webpack 3'ü kullanarak Bootstrap'i projenize nasıl dahil edeceğinizi öğrenin.

Bootstrap Kurulumu

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

import 'bootstrap';

Alternatif olarak, eklentileri gerektiği gibi tek tek içe aktarabilirsiniz:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';
...

Bootstrap, jQuery ve Popper'a bağlıdır , bunlar şu şekilde tanımlanır , bu, her ikisini de kullanımınıza peerDependencieseklediğinizden emin olmanız gerektiği anlamına gelir .package.jsonnpm install --save jquery popper.js

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ı kullanın ve ardından Bootstrap:

@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: [{
      loader: 'style-loader', // inject CSS to page
    }, {
      loader: 'css-loader', // translates CSS into CommonJS modules
    }, {
      loader: 'postcss-loader', // Run post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            require('autoprefixer')
          ];
        }
      }
    }, {
      loader: 'sass-loader' // compiles Sass to CSS
    }]
  },
  ...

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, webpack config üzerinde herhangi bir özel değişiklik yapmadan mevcut kuralınızı kullanabilirsiniz .sass-loader

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