Webpack

Ianaro ny fomba fampidirana Bootstrap amin'ny tetikasanao amin'ny fampiasana Webpack 3.

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';

Raha tsy izany, azonao atao ny manafatra plugins tsirairay raha ilaina:

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

Ny Bootstrap dia miankina amin'ny jQuery sy Popper , ireo dia voafaritra ho peerDependencies, midika izany fa tsy maintsy azonao antoka fa ampidirinao amin'ny package.jsonfampiasanao izy roa npm install --save jquery popper.js.

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

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 tsy mila sass-loaderstyle -loader sy css-loader fotsiny ianao .

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