Xipaci xa Webu

Dyondza ndlela yo katsa Bootstrap eka phurojeke ya wena hi ku tirhisa Webpack 3.

Ku nghenisa Bootstrap

Nghenisa bootstrap tanihi modula ya Node.js hi ku tirhisa npm.

Ku nghenisa JavaScript

Nghenisa JavaScript ya Bootstrap hi ku engetela layini leyi eka ndhawu yo nghena ya app ya wena (hi ntolovelo index.jskumbe app.js):

import 'bootstrap';

Handle ka sweswo, u nga ha nghenisa ti-plugin hi toxe tanihilaha swi lavekaka hakona:

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

Bootstrap yi titshege hi jQuery na Popper , leswi swi hlamuseriwa tanihi peerDependencies, leswi swi vula leswaku u ta boheka ku tiyisisa leswaku u engetela havumbirhi bya swona eka ku package.jsontirhisa ka wena npm install --save jquery popper.js.

Ku Nghenisa Switayili

Ku nghenisa Sass leyi hlengeletiweke ka ha ri emahlweni

Ku tiphina hi vuswikoti lebyi heleleke bya Bootstrap na ku yi lulamisa hi ku ya hi swilaveko swa wena, tirhisa tifayela ta xihlovo tanihi xiphemu xa endlelo ra ku hlanganisa ra phurojeke ya wena.

Xo sungula, tiendlela ya wena _custom.scssivi u yi tirhisa ku tlula swilo leswi cinca-cincaka swa ntolovelo leswi akiweke endzeni . Kutani, tirhisa fayili ya wena leyikulu ya Sass ku nghenisa swilo swa wena leswi cinca-cincaka swa ntolovelo, ivi ku landzela Bootstrap:

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

Leswaku Bootstrap yi hlengeleta, tiyisisa leswaku u nghenisa no tirhisa swichayachayani leswi lavekaka: sass-loader , postcss-loader na Autoprefixer . Hi ku lulamisiwa lokutsongo, config ya wena ya webpack yi fanele ku katsa nawu lowu kumbe leswi fanaka na swona:

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

Ku nghenisa CSS leyi Hlengeletiweke

Handle ka sweswo, u nga tirhisa CSS ya Bootstrap leyi lunghekeleke ku tirhisiwa hi ku engetela ntsena layini leyi eka ndhawu yo nghena ya phurojeke ya wena:

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

Eka xiyimo lexi u nga tirhisa nawu wa wena lowu nga kona for csshandle ka ku cinca ko hlawuleka eka webpack config, handle ka loko u nga lavi sass-loaderntsena style-loader na css-loader .

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