Bootstrap/parcel.md at 9ec51f449904bae076b2334e748559706182f046

mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00

Anthony Perez 1fed10dfb1 Update parcel.md

Following the Parcel v1 installation guide seems to install the latest version of Parcel (v2), which makes several instructions in this guide throw errors. Therefore, I have updated the guide to work with version 2 of Parcel.

Change Details:
1) Update the URL to point to the latest doc pages.
2) Use the `type="module"` HTML attribute to reference a module [migration](https://parceljs.org/getting-started/migration/#code-changes)
3) The `--out-dir <dir>` CLI parameter has been changed to `--dist-dir <dir>` [CLI](https://parceljs.org/features/cli/#parameters)
4)  For a reason I'm unsure of, `--experimental-scope-hoisting` throws the following error: `error: unknown option '--experimental-scope-hoisting'`, so I removed it to get the build to work.

2022-04-12 21:14:54 -07:00

2.5 KiB

Raw Blame History

layout	title	description	group	toc
docs	Parcel	Learn how to include Bootstrap in your project using Parcel.	getting-started	true

Install Parcel

Install Parcel Bundler.

Install Bootstrap

[Install bootstrap]({{< docsref "/getting-started/download#npm" >}}) as a Node.js module using npm.

Bootstrap depends on Popper, which is specified in the peerDependencies property. This means that you will have to make sure to add both of them to your package.json using npm install @popperjs/core.

When all will be completed, your project will be structured like this:

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

Importing JavaScript

Import [Bootstrap's JavaScript]({{< docsref "/getting-started/javascript" >}}) in your app's entry point (usually src/index.js). You can import all our plugins in one file or separately if you require only a subset of them.

// 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';

Importing CSS

To utilize the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project's bundling process.

Create your own scss/custom.scss to [import Bootstrap's Sass files]({{< docsref "/customize/sass#importing" >}}) and then override the [built-in custom variables]({{< docsref "/customize/sass#variable-defaults" >}}).

Build app

Include src/index.js before the closing </body> tag.

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

Edit `package.json`

Add dev and build scripts in your package.json file.

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

Run dev script

Your app will be accessible at http://127.0.0.1:1234.

npm run dev

Build app files

Built files are in the build/ folder.

npm run build

2.5 KiB Raw Blame History