వెబ్‌ప్యాక్

వెబ్‌ప్యాక్‌ని ఉపయోగించి మీ ప్రాజెక్ట్‌లో బూట్‌స్ట్రాప్‌ను ఎలా చేర్చాలో తెలుసుకోండి.

బూట్‌స్ట్రాప్‌ని ఇన్‌స్టాల్ చేస్తోంది

npm ఉపయోగించి బూట్‌స్ట్రాప్‌ను Node.js మాడ్యూల్‌గా ఇన్‌స్టాల్ చేయండి.

JavaScriptను దిగుమతి చేస్తోంది

మీ యాప్ ఎంట్రీ పాయింట్‌కి (సాధారణంగా లేదా ) ఈ లైన్‌ని జోడించడం ద్వారా బూట్‌స్ట్రాప్ జావాస్క్రిప్ట్‌ని దిగుమతి చేయండి :index.jsapp.js

import 'bootstrap';

ప్రత్యామ్నాయంగా, మీరు అవసరమైన విధంగా వ్యక్తిగతంగా ప్లగిన్‌లను దిగుమతి చేసుకోవచ్చు :

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

బూట్‌స్ట్రాప్ j క్వెరీ మరియు పాపర్‌పై ఆధారపడి ఉంటుంది , ఇవి peerDependenciesఆస్తిలో పేర్కొనబడ్డాయి; package.jsonదీనర్థం మీరు ఈ రెండింటినీ మీ వినియోగానికి జోడించాలని నిర్ధారించుకోవాలి npm install --save jquery popper.js.

దిగుమతి శైలులు

ప్రీకంపైల్డ్ సాస్‌ను దిగుమతి చేస్తోంది

బూట్‌స్ట్రాప్ యొక్క పూర్తి సామర్థ్యాన్ని ఆస్వాదించడానికి మరియు దానిని మీ అవసరాలకు అనుకూలీకరించడానికి, మీ ప్రాజెక్ట్ యొక్క బండ్లింగ్ ప్రక్రియలో భాగంగా సోర్స్ ఫైల్‌లను ఉపయోగించండి.

ముందుగా, మీ స్వంతంగా సృష్టించండి మరియు అంతర్నిర్మిత అనుకూల వేరియబుల్‌లను_custom.scss భర్తీ చేయడానికి దాన్ని ఉపయోగించండి . ఆపై, మీ కస్టమ్ వేరియబుల్‌లను దిగుమతి చేసుకోవడానికి మీ ప్రధాన Sass ఫైల్‌ని ఉపయోగించండి, తర్వాత బూట్‌స్ట్రాప్:

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

బూట్‌స్ట్రాప్ కంపైల్ చేయడానికి, మీరు అవసరమైన లోడర్‌లను ఇన్‌స్టాల్ చేసి, ఉపయోగించారని నిర్ధారించుకోండి: సాస్ -లోడర్ , ఆటోప్రిఫిక్సర్‌తో పోస్ట్‌సిఎస్- లోడర్ . కనిష్ట సెటప్‌తో, మీ వెబ్‌ప్యాక్ కాన్ఫిగరేషన్‌లో ఈ నియమం లేదా ఇలాంటివి ఉండాలి:

...
{
  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ని దిగుమతి చేస్తోంది

ప్రత్యామ్నాయంగా, మీరు మీ ప్రాజెక్ట్ యొక్క ఎంట్రీ పాయింట్‌కి ఈ లైన్‌ను జోడించడం ద్వారా బూట్‌స్ట్రాప్ యొక్క ఉపయోగించడానికి సిద్ధంగా ఉన్న CSSని ఉపయోగించవచ్చు:

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

ఈ సందర్భంలో మీరు మీ ప్రస్తుత నియమాన్ని cssవెబ్‌ప్యాక్ కాన్ఫిగరేషన్‌కు ఎటువంటి ప్రత్యేక మార్పులు లేకుండా ఉపయోగించవచ్చు, మీకు sass-loaderకేవలం స్టైల్-లోడర్ మరియు css- లోడర్ అవసరం లేదు .

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