تور بەت

Webpack ئارقىلىق Bootstrap نى تۈرىڭىزگە قانداق كىرگۈزۈشنى ئۆگىنىۋېلىڭ.

Bootstrap نى ئورنىتىش

Npm ئارقىلىق bootstrap نى 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.jsonnpm install --save jquery popper.js

ئۇسلۇبلارنى ئەكىرىش

ئالدىن تەييارلانغان ساسنى ئەكىرىش

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';

بۇ خىل ئەھۋالدا ، سىز پەقەت ئۇسلۇب يۈكلىگۈچى ۋە css-css يۈكلىگۈچىگە ئېھتىياجلىق بولمىسىڭىز ، تور بەت سەپلىمىسىگە ئالاھىدە ئۆزگەرتىش كىرگۈزمەي تۇرۇپ ، ھازىرقى قائىدىڭىزنى ئىشلىتەلەيسىز .sass-loader

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