Bootstrap/parcel.md at a078b5e0b9c11d5a04497c1d1561fe9d4e0b028b

mirror of https://github.com/twbs/bootstrap.git synced 2024-12-12 00:08:59 +01:00

汪心禾 207ddbee49 Update path to @popperjs/core in parcel.md

-│   └── popper.js/
+│   └── @popperjs/
+|       └── core/

2022-04-30 10:41:18 -07:00

2.6 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/
│   └── @popperjs/
|       └── core/
├── 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.6 KiB Raw Blame History