Webpack y paquetes

Instalación de Bootstrap

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

Importación de JavaScript

Importe el JavaScript de Bootstrap agregando esta línea al punto de entrada de su aplicación (generalmente index.jso app.js):

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

Alternativamente, si solo necesita algunos de nuestros complementos, puede importar complementos individualmente según sea necesario:

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

Bootstrap depende de Popper , que se especifica en la peerDependenciespropiedad. Esto significa que tendrá que asegurarse de agregarlo a su package.jsonarchivo using npm install @popperjs/core.

Importación de estilos

Importación de Sass precompilado

Para disfrutar de todo el potencial de Bootstrap y personalizarlo según sus necesidades, utilice los archivos de origen como parte del proceso de agrupación de su proyecto.

Primero, cree uno propio _custom.scssy utilícelo para anular las variables personalizadas integradas . Luego, use su archivo Sass principal para importar sus variables personalizadas, seguido de Bootstrap:

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

Para que Bootstrap compile, asegúrese de instalar y usar los cargadores necesarios: sass-loader , postcss-loader con Autoprefixer . Con una configuración mínima, la configuración de su paquete web debe 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'
  }]
}
// ...

Importación de CSS compilado

Alternativamente, puede usar el CSS listo para usar de Bootstrap simplemente agregando esta línea al punto de entrada de su proyecto:

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

En este caso, puede usar su regla existente csssin ninguna modificación especial en la configuración del paquete web, excepto que no necesita sass-loadersolo style-loader y css-loader .

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