Tīmekļa pakotne

Uzziniet, kā iekļaut Bootstrap savā projektā, izmantojot Webpack 3.

Bootstrap instalēšana

Instalējiet bootstrap kā moduli Node.js, izmantojot npm.

JavaScript importēšana

Importējiet Bootstrap JavaScript , pievienojot šo rindiņu savas lietotnes ievades punktam (parasti index.jsvai app.js):

import 'bootstrap';

Varat arī pēc vajadzības importēt spraudņus atsevišķi :

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

Bootstrap ir atkarīgs no jQuery un Popper , tie ir definēti kā peerDependencies, tas nozīmē , ka jums būs noteikti jāpievieno tie abi jūsu package.jsonlietošanā npm install --save jquery popper.js.

Stilu importēšana

Iepriekš kompilētā Sass importēšana

Lai pilnībā izmantotu Bootstrap potenciālu un pielāgotu to savām vajadzībām, izmantojiet avota failus kā daļu no sava projekta komplektēšanas procesa.

Vispirms izveidojiet savu _custom.scssun izmantojiet to, lai ignorētu iebūvētos pielāgotos mainīgos . Pēc tam izmantojiet savu galveno sass failu, lai importētu pielāgotos mainīgos, kam seko Bootstrap:

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

Lai Bootstrap varētu kompilēt, noteikti instalējiet un izmantojiet nepieciešamos ielādētājus: sass-loader , postcss-loader ar Autoprefixer . Ar minimālu iestatīšanu tīmekļa pakotnes konfigurācijā ir jāietver šis noteikums vai līdzīgs noteikums:

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

Kompilētā CSS importēšana

Varat arī izmantot Bootstrap lietošanai gatavu css, vienkārši pievienojot šo rindiņu sava projekta ievades punktam:

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

Šajā gadījumā jūs varat izmantot esošo kārtulu cssbez īpašām izmaiņām tīmekļa pakotnes konfigurācijā, izņemot to, ka jums nav nepieciešams sass-loadertikai stila ielādētājs un css-loader .

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