Saltar al contenido principal Salta a docs navegación
in English

Webpack y paquetes

Yachay imayna Bootstrap ruwayniykipi churanaykipaq Webpack utaq wak paquetes kaqwan.

Bootstrap nisqa churay

Bootstrap huk Node.js módulo hina churay npm kaqwan.

JavaScript nisqa hawamanta apamuy

Bootstrap kaqpa JavaScript kaqninta apamuy kay chiruta ruwanaykipa yaykuyninman yapaspa (aswanta index.jsutaq app.js):

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

Hukninpi, sichus huk pisi pluginsniykullata necesitanki, plugins sapalla necesitasqaykimanhina apamuyta atinki :

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

Bootstrap Popper kaqmanta hapirin , mayqinchus peerDependenciespropiedadpi nisqa kachkan. Kayqa niyta munan, qam allinta yapanayki kanqa package.jsonllamk'achisqaykiman npm install @popperjs/core.

Estilos nisqakunata apamuspa

Importación de Sass Precompilado

Bootstrap kaqpa hunt'asqa atiyninwan kusikunaykipaq chaymanta necesidadniykimanhina ruwanapaq, pukyuta willañiqikunata llamk'achiy proyectoykipa paquete ruwayninpa huknin kaqnin hina.

Ñawpaqta, qampaq ruway _custom.scsschaymanta llamk'achiy ruwasqa sapanchasqa tikraqkunata llallinaykipaq . Chaymanta, Sass hatun willañiqiykita llamk'achiy sapanchasqa tikraqniykikunata apamunaykipaq, chaymanta Bootstrap kaqwan:

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

Bootstrap huñunapaq, aswan allinta churay chaymanta llamk'achiyta munasqa kargakuna: sass-loader , postcss-loader Autoprefixer kaqwan . Aswan pisi churanawan, webpack ruwanayki kay kamachiyta utaq chayman rikch'akuqta churanan tiyan:

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

Huñusqa CSS nisqa hawamanta apamuy

Hukninpi, Bootstrap llamk'anapaq wakichisqa CSS llamk'achiy atikunki kay chiruta proyectoykipa yaykuyninman yapaspalla:

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

Kayhina kaqpi kunan kaq kamachiyniykipaq llamk'achiy atikunki cssmana ima especial tikraykunawan webpack config kaqman, salvo mana sass-loaderestilo -cargador chaymanta css-loader kaqllata necesitankichu .

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