Webpack ha umi paquete

Oñemoĩvo Bootstrap

Emohenda bootstrap peteĩ Node.js módulo ramo eipuruhápe npm.

Ojegueru jave JavaScript

Egueru Bootstrap JavaScript emoĩvo ko línea nde app jeikeha rendaguépe (jepivegua index.jstérã app.js):

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

Ikatu avei, reikotevẽramo mbovymi ore plugin-nte, ikatu regueru umi plugin peteĩteĩ tekotevẽháicha:

import Alert from 'bootstrap/js/dist/alert';
...

Bootstrap odepende Popper rehe , ojehechaukáva peerDependenciespropiedad-pe. Péva he'ise reñangarekova'erãha remoĩ hag̃ua nde package.jsonjeporúpe npm install @popperjs/core.

Ojegueru hag̃ua Estilos

Ojegueru hag̃ua Sass Precompilado rehegua

Evy’a hag̃ua Bootstrap potencial completo rehe ha emohenda hag̃ua ne remikotevẽme, eipuru umi archivo fuente peteĩ parte ramo ne proyecto proceso de bundling-pe.

Ñepyrũrã, ejapo nde mba’éva _custom.scssha eipuru embogue hag̃ua umi mba’e’oka jeporupyre oñemboguapýva . Upéi, eipuru ne vore Sass tenondegua emoinge hag̃ua ne mba’e’oka jeporupyre, hapykuéri Bootstrap:

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

Bootstrap oñemboheko hag̃ua, eñangareko emohenda ha eipuru hag̃ua umi kargador oñeikotevẽva: sass-loader , postcss-loader Autoprefixer ndive . Ñemboheko michĩvéva reheve, ne webpack config oguerekova’erã ko tembiapoukapy térã ojoguáva:

// ...
{
  test: /\.(scss)$/,
  use: [{
    // inject CSS to page
    loader: 'style-loader'
  }, {
    // translates CSS into CommonJS modules
    loader: 'css-loader'
  }, {
    // Run postcss actions
    loader: 'postcss-loader',
    options: {
      // `postcssOptions` is needed for postcss 8.x;
      // if you use postcss 7.x skip the key
      postcssOptions: {
        // postcss plugins, can be exported to postcss.config.js
        plugins: function () {
          return [
            require('autoprefixer')
          ];
        }
      }
    }
  }, {
    // compiles Sass to CSS
    loader: 'sass-loader'
  }]
}
// ...

Ojegueru hag̃ua CSS oñembosako’íva

Ikatu avei eipuru Bootstrap CSS ojepurumava’ekue emoĩntevo ko línea ne proyecto jeikeha rendaguépe:

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

Ko kásope ikatu eipuru ne regla oĩmava mba’eveichagua modificación especial’ỹre webpack config-pe, ndaha’éiramo cssnatekotevẽiha style-loader ha css-loader añónte .sass-loader

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