የድር ጥቅል

Webpackን በመጠቀም Bootstrapን በፕሮጄክትዎ ውስጥ እንዴት ማካተት እንደሚችሉ ይወቁ።

Bootstrapን በመጫን ላይ

npm በመጠቀም bootstrap ን እንደ Node.js ሞጁል ጫን።

ጃቫስክሪፕት በማስመጣት ላይ

ይህንን መስመር ወደ መተግበሪያዎ የመግቢያ ነጥብ በማከል የBootstrapን ጃቫስክሪፕት ያስመጡ (ብዙውን ጊዜ index.jsወይም app.js):

import 'bootstrap';

በአማራጭ፣ እንደ አስፈላጊነቱ ተሰኪዎችን በተናጥል ማስመጣት ይችላሉ ፡-

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

Bootstrap በ jQuery እና ፖፐርpeerDependencies ላይ የተመሰረተ ነው, በንብረቱ ውስጥ የተገለጹት ; package.jsonይህ ማለት ሁለቱንም ወደ እርስዎ መጠቀም መጨመሩን ማረጋገጥ አለብዎት npm install --save jquery popper.js.

ቅጦችን በማስመጣት ላይ

ቀድሞ የተጠናቀረ Sass በማስመጣት ላይ

በBootstrap ሙሉ አቅም ለመደሰት እና ለፍላጎትዎ ለማበጀት የምንጭ ፋይሎችን እንደ የፕሮጀክትዎ ማጠቃለያ ሂደት አካል ይጠቀሙ።

በመጀመሪያ የራስዎን ይፍጠሩ እና አብሮ የተሰሩ ብጁ ተለዋዋጮችን_custom.scss ለመሻር ይጠቀሙበት ። ከዚያ፣ ብጁ ተለዋዋጮችዎን ለማስመጣት ዋናውን የSass ፋይል ይጠቀሙ፣ ከዚያ በኋላ ቡትስትራፕ፡-

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

Bootstrap እንዲጠናቀር፣ የሚፈለጉትን ጫኚዎች መጫን እና መጠቀምዎን ያረጋግጡ ፡ sass- loader , postcss-loader with Autoprefixer . በትንሹ ማዋቀር፣ የዌብፓክ ውቅርዎ ይህንን ህግ ወይም ተመሳሳይ ማካተት አለበት፡-

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

የተጠናቀረ ሲኤስኤስን በማስመጣት ላይ

በአማራጭ፣ ይህንን መስመር በቀላሉ ወደ የፕሮጀክትዎ መግቢያ ነጥብ በማከል ለአገልግሎት ዝግጁ የሆነውን የBootstrapን CSS መጠቀም ይችላሉ።

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

በዚህ አጋጣሚ ያለ ምንም ልዩ ማሻሻያ በዌብፓክ ማዋቀር ላይ ያለውን ህግ መጠቀም ትችላለህ ፣ ስታይል ጫኚ እና css - loader ብቻ cssካላስፈለገህ በስተቀር ።sass-loader

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