Webpack rehegua

Eikuaa mba’éichapa ikatu emoinge Bootstrap ne rembiaporãme eipuruhápe Webpack 3.

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/dropdown';
...

Bootstrap odepende jQuery ha Popper rehe , ko’ãva oñemboheko kóicha peerDependencies, 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 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.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 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
    }]
  },
  ...

Ojegueru hag̃ua CSS oñembosako’íva

Ikatu avei eipuru Bootstrap css ojepurupaitéva emoĩvo ko línea nde 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']
      }
    ]
  }
  ...