Webpack nisqa

Yachay imayna Bootstrap ruwayta proyectoykipi Webpack 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):

import 'bootstrap';

Hukninpi, sapalla plugins nisqakunata necesitasqaykimanhina apamuyta atinki:

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

Bootstrap jQuery chaymanta Popper kaqmanta hapirin , mayqinkunachus peerDependenciespropiedadpi nisqa kanku; package.jsonkayqa niyta munan iskayninta llamk'achisqaykiman yapanayki tiyan npm install --save jquery popper.js.

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

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