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.js
utaq 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 peerDependencies
propiedadpi nisqa kachkan. Kayqa niyta munan, qam allinta yapanayki kanqa package.json
llamk'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.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: [{
// 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 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'
]
}
]
}
// ...