Bootstrap & Parcel

Officialis dux est quam includere et fasciculum CSS Bootstrap et JavaScript in tuo project utens Parcel.

In hac pagina

Vis ad finem skip? Download source code and working demo for this guide from the twbs/exempla repositorium . Exemplum etiam in StackBlitz aperire potes sed illud non currere, quia Parcel ibi non sustinetur.

Setup

Parcel consilium cum Bootstrap ex scabere aedificamus, ideo necessariae sunt aliquae et ante gradibus ascendunt antequam vere incipias. Hic dux postulat ut Node.js instituatur et aliquam familiaritatem cum termino habeas.

Creare consilium folder et setup npm. Folderum my-projectcreabimus et npm initializemus cum -yargumento ad vitandum nos omnes quaestiones interactivas rogantes.
```
mkdir my-project && cd my-project
npm init -y
```
Parcel install. Dissimilis ductor noster Webpack, unicum instrumentum aedificationis est dependens hic. Parcel sponte installabit transformatores linguam (sicut Sass) ut eos detegit. Insignemus --save-devhanc dependentiam nonnisi ad usum evolutionis et non ad productionem.
```
npm i --save-dev parcel
```
Install Bootstrap. Nunc Bootstrap installare possumus. Etiam Popper instituemus cum guttae, popoverae et instrumenta nostra ab ea pro positione pendent. Si non cogitas utendo illis componentibus, hic praeterire potes Popper.
```
npm i --save bootstrap @popperjs/core
```

Nunc nos omnes necessarias clientelas inauguratus, efficere possumus ad operandum files creandos et invehendos Bootstrap.

Project structure

Iam nos my-projectfolder et initialized npm creavit. Nunc etiam creabimus nostrum srcfolder, stylesheet, et JavaScript lima rotundum structuram exertam. Sequentia e curre my-project, vel manually folder vel lima structuram creare infra ostendetur.

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

Cum es factum, consilium tuum perfectum hoc debet videre:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json

Hic omnia in loco suo sunt, sed Parcel pagina HTML et npm scriptura indiget ut servo nostro incipias.

Configurare Parcel

Cum clientelis inauguratus et proiectum nostrum folder pro nobis paratum est ut coding committitur, nunc Parcel configurare possumus et propositum nostrum localiter currere. Parcel ipsa nulla designatio lima ex consilio requirit, sed opus est nobis scriptionis npm et fasciculi HTML ut servo nostro committitur.

Imple in src/index.htmltabella. Parcel pagina ad reddendam indiget, sic pagina nostra utimur index.htmlad aliquas praecipuas HTML collocandas, inclusas nostras CSS et JavaScript.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>

Inclusi sumus exiguam partem Bootstrap hic cum pro div class="container"et <button>ut videmus cum Bootstrap CSS oneratur a Webpack.

Parcellam sponte deprehendes nos Sass utendo et in plugin Sass Parcel install ut eam sustineam. Tamen, si vis, etiam manually currere potes npm i --save-dev @parcel/transformer-sass.

Parcel npm scriptor addere. Aperi, package.jsonet sequens startscriptori scriptsobiecto adde. Hoc scripto utemur, ut servo progressionis nostrae Parcel committitur et tabellam HTML reddemus quae posteaquam in indicem compilavit dist.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
Et tandem, Parcel incipere possumus. A my-projectfolder in termino tuo, currite ut nuper additae scripturae npm;
```
npm start
```

In altera et ultima sectione huic duce, omnes CSS Bootstrap et JavaScript importabimus.

Import Bootstrap

Bootstrap importare in Parcel duas importare requirit, unum in nostrum styles.scsset unum in nostram main.js.

Import Bootstrap's CSS. Quae sequuntur adde src/scss/styles.scssut omnia importet fontem Sass Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Singillatim stylos nostros etiam importare potes si vis. Read our Sass import docs for details.
Inferre Bootstrap's JS. Quae sequuntur ad src/js/main.jsomnia adducenda Bootstrap scriptor JS. Popper sponte per Bootstrap importari vult.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Plugins JavaScript etiam importare potes singulatim prout opus est ad magnitudinum fasciculorum custodiendam:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Read our JavaScript docs for more information on how to use Bootstrap's plugins.
Et factum es! 🎉 Cum fonte Bootstrap Sass et JS plene oneratis, loci tui evolutionis cultor hoc nunc spectare debet.

Nunc incipere potes addendo aliqua components Bootstrap uti velis. Vide ut inspicias integram particulam exempli propositi pro modo includere additional consuetudinem Sass et optimize fabricam tuam imponendo solum partes Bootstrap scriptoris CSS et JS quae tibi necessaria sunt.

Vide quid mali an ex date hic? Quaeso aperi fluxum GitHub . Integer fermentum fermentum egestas? Quaere an disceptationem de GitHub incipias.