summaryrefslogtreecommitdiffstats
path: root/site/content/docs/5.3/getting-started/vite.md
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--site/content/docs/5.3/getting-started/vite.md (renamed from site/content/docs/5.2/getting-started/vite.md)39
1 files changed, 11 insertions, 28 deletions
diff --git a/site/content/docs/5.2/getting-started/vite.md b/site/content/docs/5.3/getting-started/vite.md
index b203eef..9c2be9f 100644
--- a/site/content/docs/5.2/getting-started/vite.md
+++ b/site/content/docs/5.3/getting-started/vite.md
@@ -1,6 +1,6 @@
---
layout: docs
-title: "Bootstrap & Vite"
+title: Bootstrap and Vite
description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Vite.
group: getting-started
toc: true
@@ -35,6 +35,7 @@ We're building a Vite project with Bootstrap from scratch, so there are some pre
```sh
npm i --save bootstrap @popperjs/core
```
+
4. **Install additional dependency.** In addition to Vite and Bootstrap, we need another dependency (Sass) to properly import and bundle Bootstrap's CSS.
```sh
@@ -81,9 +82,11 @@ With dependencies installed and our project folder ready for us to start coding,
export default {
root: path.resolve(__dirname, 'src'),
+ build: {
+ outDir: '../dist'
+ },
server: {
- port: 8080,
- hot: true
+ port: 8080
}
}
```
@@ -97,13 +100,13 @@ With dependencies installed and our project folder ready for us to start coding,
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap w/ Vite</title>
+ <script type="module" src="./js/main.js"></script>
</head>
<body>
<div class="container py-4 px-3 mx-auto">
<h1>Hello, Bootstrap and Vite!</h1>
<button class="btn btn-primary">Primary button</button>
</div>
- <script type="module" src="./js/main.js"></script>
</body>
</html>
```
@@ -135,36 +138,16 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
## Import Bootstrap
-1. **Set up Bootstrap's Sass import in `vite.config.js`.** Your configuration file is now complete and should match the snippet below. The only new part here is the `resolve` section—we use this to add an alias to our source files inside `node_modules` to keep imports as simple as possible.
-
- <!-- eslint-skip -->
- ```js
- const path = require('path')
-
- export default {
- root: path.resolve(__dirname, 'src'),
- resolve: {
- alias: {
- '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
- }
- },
- server: {
- port: 8080,
- hot: true
- }
- }
- ```
-
-2. **Now, let's import Bootstrap's CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass.
+1. **Import Bootstrap's CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass.
```scss
// Import all of Bootstrap's CSS
- @import "~bootstrap/scss/bootstrap";
+ @import "bootstrap/scss/bootstrap";
```
*You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.*
-3. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap.
+2. **Next we load the CSS and import Bootstrap's JavaScript.** Add the following to `src/js/main.js` to load the CSS and import all of Bootstrap's JS. Popper will be imported automatically through Bootstrap.
<!-- eslint-skip -->
```js
@@ -187,7 +170,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
*[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.*
-4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
+3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
<img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap">