Веб-пакет

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

Bootstrap орнатылуда

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

JavaScript импорттау

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

import 'bootstrap';

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

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

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 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
    }]
  },
  ...

Құрастырылған 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']
      }
    ]
  }
  ...