Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Vite, Parcel and Webpack guides #38305

Merged
merged 5 commits into from
Mar 23, 2023
Merged

Update Vite, Parcel and Webpack guides #38305

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
11b36ad
Update Vite, Parcel and Webpack guides
julien-deramond Mar 22, 2023
08b6195
Fix missing autoprefix import in webpack guide
julien-deramond Mar 22, 2023
76ef051
Update webpack.md
XhmikosR Mar 23, 2023
8cc09b0
Update webpack.md
XhmikosR Mar 23, 2023
267a902
Update webpack.md
XhmikosR Mar 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/content/docs/5.3/getting-started/parcel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss`

```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.*
Expand Down
33 changes: 8 additions & 25 deletions site/content/docs/5.3/getting-started/vite.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
```
Expand Down Expand Up @@ -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
Expand All @@ -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">

Expand Down
67 changes: 43 additions & 24 deletions site/content/docs/5.3/getting-started/webpack.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ We're building a Webpack project with Bootstrap from scratch, so there are some
npm init -y
```

2. **Install Webpack.** Next we need to install our Webpack development dependencies: `webpack` for the core of Webpack, `webpack-cli` so we can run Webpack commands from the terminal, and `webpack-dev-server` so we can run a local development server. We use `--save-dev` to signal that these dependencies are only for development use and not for production.
2. **Install Webpack.** Next we need to install our Webpack development dependencies: `webpack` for the core of Webpack, `webpack-cli` so we can run Webpack commands from the terminal, and `webpack-dev-server` so we can run a local development server. Additionally, we'll install `html-webpack-plugin` to be able to store our `index.html` in `src` directory instead of the default `dist` one. We use `--save-dev` to signal that these dependencies are only for development use and not for production.

```sh
npm i --save-dev webpack webpack-cli webpack-dev-server
npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
```

3. **Install Bootstrap.** Now we can install Bootstrap. We'll also install Popper since our dropdowns, popovers, and tooltips depend on it for their positioning. If you don't plan on using those components, you can omit Popper here.
Expand All @@ -49,21 +49,20 @@ Now that we have all the necessary dependencies installed, we can get to work cr
We've already created the `my-project` folder and initialized npm. Now we'll also create our `src` and `dist` folders to round out the project structure. Run the following from `my-project`, or manually create the folder and file structure shown below.

```sh
mkdir {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js
mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss webpack.config.js
```

When you're done, your complete project should look like this:

```text
my-project/
├── dist/
│ └── index.html
├── src/
│ ├── js/
│ │ └── main.js
│ └── scss/
│ └── styles.scss
│ ├── scss/
│ │ └── styles.scss
│ └── index.html
├── package-lock.json
├── package.json
└── webpack.config.js
Expand All @@ -78,7 +77,10 @@ With dependencies installed and our project folder ready for us to start coding,
1. **Open `webpack.config.js` in your editor.** Since it's blank, we'll need to add some boilerplate config to it so we can start our server. This part of the config tells Webpack where to look for our project's JavaScript, where to output the compiled code to (`dist`), and how the development server should behave (pulling from the `dist` folder with hot reload).

```js
'use strict'

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
mode: 'development',
Expand All @@ -91,11 +93,14 @@ With dependencies installed and our project folder ready for us to start coding,
static: path.resolve(__dirname, 'dist'),
port: 8080,
hot: true
}
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' })
]
}
```

2. **Next we fill in our `dist/index.html`.** This is the HTML page Webpack will load in the browser to utilize the bundled CSS and JS we'll add to it in later steps. Before we can do that, we have to give it something to render and include the `output` JS from the previous step.
2. **Next we fill in our `src/index.html`.** This is the HTML page Webpack will load in the browser to utilize the bundled CSS and JS we'll add to it in later steps. Before we can do that, we have to give it something to render and include the `output` JS from the previous step.

```html
<!doctype html>
Expand Down Expand Up @@ -148,7 +153,11 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
1. **Set up the loaders in `webpack.config.js`.** Your configuration file is now complete and should match the snippet below. The only new part here is the `module` section.

```js
'use strict'

const path = require('path')
const autoprefixer = require('autoprefixer')
const HtmlWebpackPlugin = require('html-webpack-plugin')
XhmikosR marked this conversation as resolved.
Show resolved Hide resolved

module.exports = {
mode: 'development',
Expand All @@ -162,6 +171,9 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
port: 8080,
hot: true
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' })
],
module: {
rules: [
{
Expand All @@ -181,7 +193,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
options: {
postcssOptions: {
plugins: () => [
require('autoprefixer')
autoprefixer
]
}
}
Expand All @@ -203,7 +215,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first

```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.*
Expand Down Expand Up @@ -256,20 +268,27 @@ npm install --save-dev mini-css-extract-plugin
Then instantiate and use the plugin in the Webpack configuration:

```diff
--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -1,8 +1,10 @@
+const miniCssExtractPlugin = require('mini-css-extract-plugin')
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,6 +3,7 @@
const path = require('path')

const autoprefixer = require('autoprefixer')
const HtmlWebpackPlugin = require('html-webpack-plugin')
+const miniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
mode: 'development',
entry: './src/js/main.js',
+ plugins: [new miniCssExtractPlugin()],
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
@@ -18,8 +20,8 @@ module.exports = {
@@ -17,7 +18,8 @@ module.exports = {
hot: true
},
plugins: [
- new HtmlWebpackPlugin({ template: './src/index.html' })
+ new HtmlWebpackPlugin({ template: './src/index.html' }),
+ new miniCssExtractPlugin()
],
module: {
rules: [
@@ -25,8 +27,8 @@ module.exports = {
test: /\.(scss)$/,
use: [
{
Expand Down Expand Up @@ -305,7 +324,7 @@ Configure Webpack to extract inline SVG files like this:
```diff
--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -16,6 +16,14 @@ module.exports = {
@@ -23,6 +23,14 @@ module.exports = {
},
module: {
rules: [
Expand Down