diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md')
-rw-r--r-- | vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md | 35 |
1 files changed, 9 insertions, 26 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md b/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md index 4086316d3..b62e6190d 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/getting-started/vite.md +++ b/vendor/twbs/bootstrap/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 @@ -82,6 +82,9 @@ 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 @@ -98,13 +101,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> ``` @@ -136,36 +139,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 @@ -188,7 +171,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"> |