paquete web

Aprende a incluir Bootstrap en tu proyecto usando Webpack 3.

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):

import 'bootstrap';

Alternativamente, puede importar complementos individualmente según sea necesario:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

Bootstrap depende de jQuery y Popper , estos se definen como peerDependencies, esto significa que deberá asegurarse de agregar ambos a su package.jsonuso npm install --save jquery popper.js.

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: [{
      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
    }]
  },
  ...

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 modificaciones especiales en la configuración del paquete web, excepto que no necesita sass-loadersolo el cargador de estilo y el cargador de css .

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