የድር ጥቅል

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

Bootstrapን በመጫን ላይ

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

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

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

import 'bootstrap';

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

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

ቡትስትራፕ በ jQuery እና Popper ላይ የተመረኮዘ ነው ፣ እነዚህም እንደ ይገለጻሉ ፣ ይህ ማለት ሁለቱንም ወደ እርስዎ መጠቀም peerDependenciesመጨመሩን ማረጋገጥ አለብዎት ።package.jsonnpm 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 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
    }]
  },
  ...

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

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

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

በዚህ አጋጣሚ ያለ ምንም ልዩ ማሻሻያ ወደ cssዌብፓክ ማዋቀር መጠቀም ይችላሉ ።sass-loader

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