Webpack ye

Aw ye Bootstrap doncogo dɔn aw ka porozɛ kɔnɔ ni Webpack 3 ye.

Bootstrap sigili

Bootstrap sigi sen kan i n’a fɔ Node.js modulu ni npm ye.

JavaScript min bɛ don jamana kɔnɔ

Bootstrap ka JavaScript ladon ni nin layini in farali ye i ka porogaramu don yɔrɔ la (a ka c’a la index.jswalima app.js):

import 'bootstrap';

O cogo kelen na, i bɛ se ka plugins (plugin) ladon kelen-kelen i n’a fɔ a mago bɛ cogo min na:

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

Bootstrap bɛ tali kɛ jQuery ni Popper de la , ninnu ɲɛfɔlen don i n' a fɔ peerDependencies, o kɔrɔ ye ko i bɛna i jija k' u fila bɛɛ fara i ka package.jsonbaarakɛcogo npm install --save jquery popper.jskan .

Importation (Stiliw) ka don jamana kɔnɔ

Importing Sass min labɛnna ka kɔn

Walasa ka Bootstrap seko bɛɛ diyabɔ ani k’a kɛ ka kɛɲɛ n’i magow ye, baara kɛ ni source files ye i n’a fɔ i ka poroze ka bundling process dɔ.

Fɔlɔ, i yɛrɛ ta dabɔ _custom.scssani ka baara kɛ n’a ye walasa ka ladamu fɛn caman sɛgɛsɛgɛli kɛ . O kɔfɛ, baara kɛ ni i ka sass file kunba ye walasa k’i ka custom variables (daɲɛw sɛgɛsɛgɛli) ladon, o kɔfɛ Bootstrap:

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

Walasa Bootstrap ka se ka dalajɛ, aw ye aw jija ka doni-minɛnw sigi sen kan ani ka baara kɛ ni u ye: sass-loader , postcss-loader ni Autoprefixer . Ni sigicogo fitinin ye, i ka webpack config ka kan ka nin sariya in walima a ɲɔgɔnnaw don a kɔnɔ:

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

CSS lajɛlenw doncogo

O cogo kelen na, i bɛ se ka baara kɛ ni Bootstrap ka css labɛnnen ye baara kama ni i ye nin layini in fara dɔrɔn i ka porozɛ donyɔrɔ kan:

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

O cogo la i bɛ se ka baara kɛ n’i ka sariya kɔrɔ ye for cssk’a sɔrɔ i ma fɛn kɛrɛnkɛrɛnnen dɔw sɛmɛntiya webpack config kan fo n’i mago tɛ sass-loaderstyle -loader ni css-loader dɔrɔn na .

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