ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
in English

ዌብፓክን ባንድለራትን

Webpack ወይ ካልኦት bundlers ተጠቂምካ Bootstrap ኣብ ፕሮጀክትካ ከመይ ጌርካ ከም እተእትዎ ተማሃር።

ምትካል ቡትስትራፕ

bootstrap ከም Node.js ሞዱል npm ብምጥቃም ንጽዓኖ።

ጃቫስክሪፕት ካብ ወጻኢ ምእታው

ነዚ መስመር ኣብቲ ናይ ኣፕካ መእተዊ ነጥቢ ብምውሳኽ ናይ Bootstrap ጃቫስክሪፕት ኣእቱ (መብዛሕትኡ ግዜ index.jsወይ app.js):

// You can specify which plugins you need
import { Tooltip, Toast, Popover } from 'bootstrap';

ከም ኣማራጺ፡ ውሑዳት ካብ ፕላጊናትና ጥራይ እንተድኣ ደሊኹም ፡ ከም ኣድላይነቱ ፕላጊናት ብውልቂ ከተእትዉ ትኽእሉ ኢኹም፤

import Alert from 'bootstrap/js/dist/alert';
...

ቡትስትራፕ ኣብ ፖፐር ይምርኮስ ፣ እዚ ድማ ኣብቲ peerDependenciesንብረት ተገሊጹ ኣሎ። package.jsonእዚ ማለት ኣብ ኣጠቓቕማኻ ምውሳኽካ ከተረጋግጽ ክትግደድ ኢኻ npm install @popperjs/core

ቅዲታት ምእታው

ቅድሚኡ ዝተጠርነፈ ሳስ ምእታው

ምሉእ ዓቕሚ ቡትስትራፕ ንምስትምቓርን ምስ ድሌታትካ ንምምዕርራይን፡ ነቶም ምንጪ ፋይላት ከም ኣካል ናይቲ ፕሮጀክትካ መስርሕ ምትእኽኻብ ተጠቐመሎም።

መጀመርታ ናትካ ፍጠር እሞ ነቶም ኣብ ውሽጢ ዝተሃንጹ ብሕታዊ ተቐያየርቲ_custom.scss ንምግዳፍ ተጠቐመሎም ። ድሕሪኡ፡ ነቲ ቀንዲ Sass ፋይልካ ተጠቒምካ ብሕታዊ ተለዋዋጢ ረቛሒታትካ ኣእቱ፡ ድሕሪኡ Bootstrap ይስዕብ፤

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

ቡትስትራፕ ንኽጥርንፍ፡ ዘድልዩ ሎደርስ ከም እትተክልን ከም እትጥቀመሉን ኣረጋግጽ ፡ sass-loader , postcss-loader ምስ Autoprefixer ። ምስ ዝተሓተ ምድላው፡ ናትካ webpack config ነዚ ሕጊ ወይ ተመሳሳሊ ከጠቓልል ኣለዎ፤

// ...
{
  test: /\.(scss)$/,
  use: [{
    // inject CSS to page
    loader: 'style-loader'
  }, {
    // translates CSS into CommonJS modules
    loader: 'css-loader'
  }, {
    // Run postcss actions
    loader: 'postcss-loader',
    options: {
      // `postcssOptions` is needed for postcss 8.x;
      // if you use postcss 7.x skip the key
      postcssOptions: {
        // postcss plugins, can be exported to postcss.config.js
        plugins: function () {
          return [
            require('autoprefixer')
          ];
        }
      }
    }
  }, {
    // compiles Sass to CSS
    loader: 'sass-loader'
  }]
}
// ...

ዝተጠርነፈ CSS ምእታው

ከም ኣማራጺ፡ ነዚ መስመር ኣብቲ ናይ ፕሮጀክትካ መእተዊ ነጥቢ ብምውሳኽ ጥራይ፡ ናይ Bootstrap ንጥቕሚ ድሉው ዝኾነ CSS ክትጥቀም ትኽእል ኢኻ፤

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

ኣብዚ ጉዳይ እዚ ነቲ ዝጸንሐ ሕግኻ ብዘይ ዝኾነ ፍሉይ ምምሕያሽ ኣብ webpack config ክትጥቀመሉ ትኽእል ኢኻ፣ ብዘይካ style-loadercss- loaderን ጥራይ cssዘየድልየካ ።sass-loader

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