ዌብፓክ

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

ምትካል ቡትስትራፕ

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

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

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

import 'bootstrap';

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

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

Bootstrap ኣብ jQuery ን Popper ን ዝምርኮስ እዩ ፣ እዚኦም ከምዚ ዝብሉ እዮም ዝግለጹ ፣ እዚ ማለት ክልቲኦም ኣብ ኣጠቓቕማኻ peerDependenciesክትውስኾም ከተረጋግጽ ክትግደድ ኢኻ ።package.jsonnpm 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 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 ምእታው

ከም ኣማራጺ፡ ነዚ መስመር ኣብቲ ናይ ፕሮጀክትካ መእተዊ ነጥቢ ብምውሳኽ ጥራይ፡ ናይ 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']
      }
    ]
  }
  ...