Webpack nisqa

Yachay imayna Bootstrap ruwayta proyectoykipi Webpack 3 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/dropdown';
...

Bootstrap jQuery chaymanta Popper kaqmanta hapirin , kaykunaqa kayhina riqsichisqa kanku , kayqa niyta munan iskayninta llamk'achisqaykiman peerDependenciesyapanaykipaq allinta ruwanayki tiyan .package.jsonnpm 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, hatun sass 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 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
    }]
  },
  ...

Huñusqa CSS nisqa hawamanta apamuy

Hukninpi, Bootstrap kaqpa listo llamk'anapaq css kaqninta llamk'achiy atikunki kay chiruta proyectoykipa yaykuyninman yapaspalla:

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

Kay casopi qam llamk'achiy atikunki kunan kaq kamachiyniykipaq cssmana ima especial tikraykunawan webpack config kaqman salvo mana necesitankichu sass-loadersapalla style-loader chaymanta css-loader .

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