Webpack sy bundlers

Fametrahana Bootstrap

Mametraka bootstrap ho modely Node.js mampiasa npm.

Manafatra JavaScript

Ampidiro ny JavaScript an'ny Bootstrap amin'ny fampidirana ity andalana ity amin'ny idiran'ny fampiharana anao (matetika index.jsna app.js):

import 'bootstrap';

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

Raha tsy izany, raha vitsivitsy amin'ireo plugins ihany no ilainao dia azonao atao ny manafatra plugins tsirairay araka izay ilaina:

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

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

Bootstrap dia miankina amin'ny Popper , izay voafaritra ao amin'ny peerDependenciesfananana. Midika izany fa tsy maintsy azonao antoka fa ampidirinao amin'ny package.jsonfampiasanao izany npm install @popperjs/core.

Manafatra Styles

Manafatra Sass precompiled

Raha te hankafy ny fahafahan'ny Bootstrap feno sy amboary izany amin'ny filanao, ampiasao ny rakitra loharano ho ampahany amin'ny fizotran'ny tetikasanao.

Voalohany, mamorona anao manokana _custom.scssary ampiasao izany hanesorana ireo fari-pahaiza-manao namboarina . Avy eo, ampiasao ny rakitra Sass lehibenao hanafatra ny fari-piainanao manokana, arahin'ny Bootstrap:

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

Mba hanangonana ny Bootstrap dia ataovy azo antoka fa mametraka sy mampiasa ireo loader ilaina ianao: sass-loader , postcss-loader miaraka amin'ny Autoprefixer . Miaraka amin'ny fananganana kely indrindra, ny config webpack-nao dia tokony ahitana ity fitsipika ity na mitovitovy:

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

Manafatra CSS natambatra

Raha tsy izany, azonao atao ny mampiasa CSS efa vonona hampiasaina amin'ny Bootstrap amin'ny fampidirana fotsiny ity andalana ity amin'ny teboka fidirana amin'ny tetikasanao:

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

Amin'ity tranga ity dia azonao atao ny mampiasa ny fitsipika efa misy anao cssraha tsy misy fanovana manokana amin'ny config webpack, afa-tsy ianao tsy mila sass-loaderstyle -loader sy css-loader .

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