Pecyn gwe

Dysgwch sut i gynnwys Bootstrap yn eich prosiect gan ddefnyddio Webpack 3.

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

import 'bootstrap';

Fel arall, gallwch fewnforio ategion yn unigol yn ôl yr angen:

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

Mae Bootstrap yn dibynnu ar jQuery a Popper , diffinnir y rhain fel peerDependencies, mae hyn yn golygu y bydd yn rhaid i chi wneud yn siŵr eich bod yn ychwanegu'r ddau at eich package.jsondefnydd npm install --save jquery popper.js.

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 cyfluniad pecyn gwe gynnwys y rheol hon neu debyg:

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

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 eich rheol bresennol ar gyfer cssheb unrhyw addasiadau arbennig i webpack config ac eithrio nad oes angen sass-loaderdim ond style-loader a css-loader .

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