paquete web

Aprenda a incluir Bootstrap en su proyecto usando Webpack.

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 , que se especifican en la peerDependenciespropiedad; esto significa que tendrá que asegurarse de agregar ambos a su package.jsonarchivo using 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 postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          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']
    }
  ]
}
...