Webpack

Webpack 3 аркылуу Bootstrapди долбооруңузга кантип кошууну үйрөнүңүз.

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 жана Попперге көз каранды , алар төмөнкүчө аныкталат 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';

Бул учурда сиз учурдагы cssэрежеңизди веб-пакет конфигурациясына эч кандай атайын өзгөртүүлөрсүз колдонсоңуз болот, эгерде сизге sass-loaderжөн гана style-loader жана css-loader керек эмес .

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