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.js
utaq 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 peerDependencies
propiedadpi nisqa kanku; package.json
kayqa 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.scss
chaymanta 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 css
mana ima especial tikraykunawan webpack config kaqman, salvo mana sass-loader
estilo -cargador chaymanta css-loader kaqllata necesitankichu .
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...