ዌብፓክ

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

ምትካል ቡትስትራፕ

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

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

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

import 'bootstrap';

ከም ኣማራጺ ድማ ፡ ከም ኣድላይነቱ ፡ ፕላጊናት ብውልቂ ከተእቱ ትኽእል ኢኻ፤

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

ቡትስትራፕ ኣብ jQuery ን Popper ን ይምርኮስ ፣ እዚኦም ኣብቲ peerDependenciesንብረት ዝተገልጹ እዮም፤ package.jsonእዚ ማለት ንኽልቲኦም ኣብ ኣጠቓቕማኻ ምውሳኽካ ከተረጋግጽ ክትግደድ ኢኻ npm install --save jquery popper.js።

ቅዲታት ምእታው

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

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

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

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

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

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

ዝተጠርነፈ CSS ምእታው

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

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

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

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