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.jsté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 peerDependenciesmbaꞌekuaarãme; kóva he’ise reñangarekova’erãha remoĩ hag̃ua mokõivéva nde package.jsonjeporúpe npm install --save jquery popper.js.

Ojegueru hag̃ua Estilos

Ojegueru hag̃ua Sass Precompilado rehegua

Evy’a hag̃ua Bootstrap mba’ekuaarãpaite ha emohenda hag̃ua ne remikotevẽme, eipuru umi vore ypykue ne rembiaporã ñembojoaju rembiaporã pehẽngue ramo.

Ñepyrũrã, ejapo nde mba’éva _custom.scssha 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 cssnatekotevẽiha style-loader ha css-loader añónte .sass-loader

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