mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 13:13:03 +02:00
Code Issues Releases Wiki Activity

Update Vite, Parcel and Webpack guides (#38305)

Browse Source 
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Julien Déramond
2023-03-23 07:07:04 +01:00
committed by GitHub
parent b3faa0cfac
commit 99867eb9ba
3 changed files with 52 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
site/content/docs/5.3/getting-started/vite.md
View File

@@ -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">