પાર્સલ

પાર્સલનો ઉપયોગ કરીને તમારા પ્રોજેક્ટમાં બુટસ્ટ્રેપનો સમાવેશ કેવી રીતે કરવો તે જાણો.

આ પૃષ્ઠ પર

પાર્સલ ઇન્સ્ટોલ કરો

બુટસ્ટ્રેપ ઇન્સ્ટોલ કરો

npm નો ઉપયોગ કરીને Node.js મોડ્યુલ તરીકે બુટસ્ટ્રેપ ઇન્સ્ટોલ કરો .

બુટસ્ટ્રેપ પોપર પર આધાર રાખે છે , જે peerDependenciesપ્રોપર્ટીમાં ઉલ્લેખિત છે. package.jsonઆનો અર્થ એ છે કે તમારે તમારા ઉપયોગ માટે તે બંને ઉમેરવાની ખાતરી કરવી પડશે npm install @popperjs/core.

જ્યારે બધું પૂર્ણ થશે, ત્યારે તમારા પ્રોજેક્ટની રચના આ રીતે કરવામાં આવશે:

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

JavaScript આયાત કરી રહ્યું છે

તમારી એપ્લિકેશનના એન્ટ્રી પોઈન્ટમાં બુટસ્ટ્રેપની JavaScript આયાત કરો (સામાન્ય રીતે src/index.js). તમે અમારા બધા પ્લગિન્સને એક ફાઇલમાં અથવા અલગથી આયાત કરી શકો છો જો તમને તેમાંથી માત્ર એક સબસેટની જરૂર હોય.

// Import all plugins
import * as bootstrap from 'bootstrap';

// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';

// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';

CSS આયાત કરી રહ્યું છે

બુટસ્ટ્રેપની સંપૂર્ણ ક્ષમતાનો ઉપયોગ કરવા અને તેને તમારી જરૂરિયાતો અનુસાર કસ્ટમાઇઝ કરવા માટે, તમારા પ્રોજેક્ટની બંડલિંગ પ્રક્રિયાના ભાગ રૂપે સ્રોત ફાઇલોનો ઉપયોગ કરો.

બુટસ્ટ્રેપની સાસ ફાઇલો આયાતscss/custom.scss કરવા માટે તમારી પોતાની બનાવો અને પછી બિલ્ટ-ઇન કસ્ટમ વેરીએબલ્સને ઓવરરાઇડ કરો .

એપ્લિકેશન બનાવો

src/index.jsક્લોઝિંગ </body>ટૅગ પહેલાં શામેલ કરો .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

સંપાદિત કરો`package.json`

તમારી ફાઇલમાં ઉમેરો devઅને buildસ્ક્રિપ્ટો .package.json

"scripts": {
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}

ડેવ સ્ક્રિપ્ટ ચલાવો

તમારી એપ્લિકેશન પર ઍક્સેસિબલ હશે http://127.0.0.1:1234.

npm run dev

એપ્લિકેશન ફાઇલો બનાવો

બિલ્ટ ફાઇલો build/ફોલ્ડરમાં છે.

npm run build

પાર્સલ