Веб-пакет

Webpack көмегімен жобаңызға Bootstrap қосу жолын үйреніңіз.

Bootstrap орнатылуда

Жүктелуді npm көмегімен Node.js модулі ретінде орнатыңыз .

JavaScript импорттау

Бұл жолды қолданбаның кіру нүктесіне қосу арқылы Bootstrap JavaScript импорттаңыз (әдетте index.jsнемесе app.js):

import 'bootstrap';

Немесе қажет болған жағдайда плагиндерді жеке импорттай аласыз :

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

Bootstrap сипатта көрсетілген jQuery және Popper -ға тәуелді peerDependencies; бұл сіздің package.jsonпайдалануыңызға олардың екеуін де қосуды қамтамасыз ету керек дегенді білдіреді npm install --save jquery popper.js.

Стильдерді импорттау

Алдын ала құрастырылған Sass импорттау

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

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

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

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

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

Құрастырылған CSS импорттау

Сонымен қатар, жобаның кіру нүктесіне осы жолды қосу арқылы Bootstrap-тың пайдалануға дайын CSS-ін пайдалануға болады:

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

Бұл жағдайда сіз тек style-loader және CSS-loadercss қажет болмаса, веб-пакет конфигурациясына арнайы өзгертулерсіз қолданыстағы ережені пайдалана аласыз .sass-loader

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