Neidio i'r prif gynnwys Neidio i lywio dogfennau
in English

Pecyn gwe a bwnderi

Dysgwch sut i gynnwys Bootstrap yn eich prosiect gan ddefnyddio Webpack neu fwndeli eraill.

Gosod Bootstrap

Gosodwch bootstrap fel modiwl Node.js gan ddefnyddio npm.

Mewnforio JavaScript

Mewnforio JavaScript Bootstrap trwy ychwanegu'r llinell hon at bwynt mynediad eich app (fel arfer index.jsneu app.js):

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

Fel arall, os mai dim ond ychydig o'n ategion sydd eu hangen arnoch, gallwch fewnforio ategion yn unigol yn ôl yr angen:

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

Mae Bootstrap yn dibynnu ar Popper , a nodir yn yr peerDependencieseiddo. Mae hyn yn golygu y bydd yn rhaid i chi wneud yn siŵr ei ychwanegu at eich package.jsondefnydd npm install @popperjs/core.

Mewnforio Arddulliau

Mewnforio Sass wedi'i Rag-grynhoi

I fwynhau potensial llawn Bootstrap a'i addasu i'ch anghenion, defnyddiwch y ffeiliau ffynhonnell fel rhan o broses bwndelu eich prosiect.

Yn gyntaf, crëwch eich un eich hun _custom.scssa'i ddefnyddio i ddiystyru'r newidynnau arferiad adeiledig . Yna, defnyddiwch eich prif ffeil Sass i fewnforio eich newidynnau arferol, ac yna Bootstrap:

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

Er mwyn i Bootstrap ei lunio, gwnewch yn siŵr eich bod yn gosod ac yn defnyddio'r llwythwyr gofynnol: sass-loader , postcss-loader gydag Autoprefixer . Gydag ychydig iawn o setup, dylai eich ffurfwedd pecyn gwe gynnwys y rheol hon neu debyg:

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

Mewnforio CSS Compiled

Fel arall, gallwch ddefnyddio CSS parod Bootstrap i'w ddefnyddio trwy ychwanegu'r llinell hon at bwynt mynediad eich prosiect:

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

Yn yr achos hwn gallwch ddefnyddio'ch rheol bresennol ar gyfer cssheb unrhyw addasiadau arbennig i gyfluniad pecyn gwe, ac eithrio nad oes arnoch angen sass-loaderdim ond style-loader a css-loader .

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