Webpack

Дізнайтеся, як включити Bootstrap у свій проект за допомогою Webpack.

Встановлення Bootstrap

Встановіть bootstrap як модуль Node.js за допомогою npm.

Імпорт JavaScript

Імпортуйте JavaScript Bootstrap, додавши цей рядок до точки входу вашої програми (зазвичай 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 , postcss-loader із Autoprefixer . За мінімальних налаштувань конфігурація веб-пакета повинна містити це правило чи подібне:

...
{
  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

Крім того, ви можете використовувати готовий до використання CSS Bootstrap, просто додавши цей рядок до точки входу вашого проекту:

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

У цьому випадку ви можете використовувати своє існуюче правило cssбез будь-яких спеціальних змін у конфігурації webpack, за винятком того, що вам не потрібні sass-loaderлише style-loader і css-loader .

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