Webpack y bundlers

Instalar Bootstrap

Instala bootstrap como un módulo de Node.js usando npm.

Importar JavaScript

Importa el JavaScript de Bootstrap añadiendo esta línea al punto de entrada de tu aplicación (normalmente index.js o app.js):

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

Alternativamente, si solo necesitas algunos de nuestros plugins, puedes importar los plugins individualmente según lo necesites:

import Alert from 'bootstrap/js/dist/alert';
...

Bootstrap depende de Popper, que se especifica en la propiedad peerDependencies. Esto significa que tendrás que asegurarte de añadirlo a tu package.json usando npm install @popperjs/core.

Importar estilos

Importar Sass precompilado

Para disfrutar todo el potencial de Bootstrap y personalizarlo a tus necesidades, usa los archivos fuente como parte del proceso de bundling de tu proyecto.

Primero, crea tu propio _custom.scss y úsalo para sobrescribir las variables personalizadas integradas. Luego, usa tu archivo Sass principal para importar tus variables personalizadas, seguido de Bootstrap:

@import "custom";
@import "~bootstrap/scss/bootstrap";

Para que Bootstrap compile, asegúrate de instalar y usar los loaders necesarios: sass-loader, postcss-loader con Autoprefixer. Con una configuración mínima, tu configuración de webpack debería incluir esta regla o similar:

// ...
{
  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'
  }]
}
// ...

Importar CSS compilado

Alternativamente, puedes usar el CSS listo para usar de Bootstrap simplemente añadiendo esta línea al punto de entrada de tu proyecto:

import 'bootstrap/dist/css/bootstrap.min.css';

En este caso puedes usar tu regla existente para css sin ninguna modificación especial en la configuración de webpack, excepto que no necesitas sass-loader, solo style-loader y css-loader.

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