Saltatu eduki nagusira Saltatu dokumentuen nabigaziora
in English

Webpack eta paketeak

Ikasi nola sartu Bootstrap zure proiektuan Webpack edo beste sorta batzuk erabiliz.

Bootstrap instalatzen

Instalatu bootstrap Node.js modulu gisa npm erabiliz.

JavaScript inportatzen

Inportatu Bootstrap-en JavaScript lerro hau gehituz zure aplikazioaren sarrera puntuan (normalean index.jsedo app.js):

import 'bootstrap';

// or get all of the named exports for further usage
import * as bootstrap from 'bootstrap';

Bestela, gure plugin batzuk bakarrik behar badituzu, banan- banan inporta ditzakezu pluginak behar izanez gero:

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

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

Bootstrap Popperren araberakoa da, jabetzan zehaztuta dagoena peerDependencies. package.jsonHorrek esan nahi du zure erabileran gehitzen duzula ziurtatu beharko duzula npm install @popperjs/core.

Estiloak inportatzea

Aurrekonpilatutako Sass inportatzea

Bootstrap-en potentzial osoaz gozatzeko eta zure beharretara pertsonalizatzeko, erabili iturburu-fitxategiak zure proiektuaren multzokatze-prozesuaren zati gisa.

Lehenik eta behin, sortu zurea _custom.scsseta erabili aldagai pertsonalizatuak gainidazteko . Ondoren, erabili zure Sass fitxategi nagusia zure aldagai pertsonalizatuak inportatzeko, eta ondoren Bootstrap:

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

Bootstrap konpilatzeko, ziurtatu behar diren kargatzaileak instalatu eta erabiltzen dituzula: sass-loader , postcss- loader Autoprefixer . Gutxieneko konfigurazioarekin, zure webpack konfigurazioak arau hau edo antzekoa izan beharko luke:

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

Konpilatutako CSS inportatzen

Bestela, Bootstrap-en erabiltzeko prest dagoen CSS erabil dezakezu lerro hau zure proiektuaren sarrera puntuan gehituta:

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

Kasu honetan, lehendik duzun araua erabil dezakezu csswebpack konfigurazioan aldaketa berezirik gabe, style-loader eta css-loadersass-loader besterik ez dituzula behar izan ezik .

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