You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -136,36 +139,16 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
136
139
137
140
## Import Bootstrap
138
141
139
-
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.
2.**Now, let's import Bootstrap's CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass.
142
+
1.**Import Bootstrap's CSS.** Add the following to `src/scss/styles.scss` to import all of Bootstrap's source Sass.
160
143
161
144
```scss
162
145
// Import all of Bootstrap's CSS
163
-
@import"~bootstrap/scss/bootstrap";
146
+
@import"bootstrap/scss/bootstrap";
164
147
```
165
148
166
149
*You can also import our stylesheets individually if you want. [Read our Sass import docs]({{< docsref "/customize/sass#importing" >}}) for details.*
167
150
168
-
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.
151
+
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.
169
152
170
153
<!-- eslint-skip -->
171
154
```js
@@ -188,7 +171,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
188
171
189
172
*[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.*
190
173
191
-
4.**And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
174
+
3.**And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
192
175
193
176
<imgclass="img-fluid"src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png"alt="Vite dev server running with Bootstrap">
Copy file name to clipboardexpand all lines: site/content/docs/5.3/getting-started/webpack.md
+43-24
Original file line number
Diff line number
Diff line change
@@ -24,10 +24,10 @@ We're building a Webpack project with Bootstrap from scratch, so there are some
24
24
npm init -y
25
25
```
26
26
27
-
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.
27
+
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.
28
28
29
29
```sh
30
-
npm i --save-dev webpack webpack-cli webpack-dev-server
30
+
npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin
31
31
```
32
32
33
33
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.
@@ -49,21 +49,20 @@ Now that we have all the necessary dependencies installed, we can get to work cr
49
49
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.
When you're done, your complete project should look like this:
57
57
58
58
```text
59
59
my-project/
60
-
├── dist/
61
-
│ └── index.html
62
60
├── src/
63
61
│ ├── js/
64
62
│ │ └── main.js
65
-
│ └── scss/
66
-
│ └── styles.scss
63
+
│ ├── scss/
64
+
│ │ └── styles.scss
65
+
│ └── index.html
67
66
├── package-lock.json
68
67
├── package.json
69
68
└── webpack.config.js
@@ -78,7 +77,10 @@ With dependencies installed and our project folder ready for us to start coding,
78
77
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).
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.
103
+
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.
99
104
100
105
```html
101
106
<!doctype html>
@@ -148,7 +153,11 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
148
153
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.
0 commit comments