Webpack rehegua
Eikuaa mba’éichapa ikatu emoinge Bootstrap ne rembiaporãme Webpack rupive.
Oñemoĩvo Bootstrap
Emohenda bootstrap peteĩ Node.js módulo ramo eipuruhápe npm.
Ojegueru jave JavaScript
Egueru Bootstrap JavaScript emoĩvo ko línea nde app jeikeha rendaguépe (jepivegua index.js
térã app.js
):
import 'bootstrap';
Ikatu avei emoinge umi plugin peteĩteĩ oñeikotevẽháicha:
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...
Bootstrap odepende jQuery ha Popper rehe , oñembohekopyréva peerDependencies
mbaꞌekuaarãme; kóva he’ise rejeasegurava’erãha remoĩ mokõivéva nde package.json
jeporúpe npm install --save jquery popper.js
.
Ojegueru hag̃ua Estilos
Ojegueru hag̃ua Sass Precompilado rehegua
Evy’a hag̃ua Bootstrap potencial completo rehe ha emohenda hag̃ua ne remikotevẽme, eipuru umi archivo fuente peteĩ parte ramo ne proyecto proceso de bundling-pe.
Ñepyrũrã, ejapo nde mba’éva _custom.scss
ha eipuru embogue hag̃ua umi mba’e’oka jeporupyre oñemboguapýva . Upéi, eipuru ne vore Sass tenondegua emoinge hag̃ua ne mba’e’oka jeporupyre, hapykuéri Bootstrap:
@import "custom";
@import "~bootstrap/scss/bootstrap";
Bootstrap oñemboheko hag̃ua, eñangareko emohenda ha eipuru hag̃ua umi kargador oñeikotevẽva: sass-loader , postcss-loader Autoprefixer ndive . Ñemboheko michĩvéva reheve, ne webpack config oguerekova’erã ko tembiapoukapy térã ojoguáva:
...
{
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
}]
},
...
Ojegueru hag̃ua CSS oñembosako’íva
Ikatu avei eipuru Bootstrap CSS ojepurumava’ekue emoĩntevo ko línea ne proyecto jeikeha rendaguépe:
import 'bootstrap/dist/css/bootstrap.min.css';
Ko kásope ikatu eipuru ne regla oĩmava mba’eveichagua modificación especial’ỹre webpack config-pe, ndaha’éiramo css
natekotevẽiha style-loader ha css-loader añónte .sass-loader
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
...