@@ -20,7 +20,7 @@ If you are migrating from a previous `v2.0.0-rc.##` release, please see the
2020
2121## Documentation sections
2222
23- The online documentation is comprised of the following sections :
23+ The online documentation comprises :
2424
2525- [ Components] ( /docs/components ) - Components and component plugin documentation
2626- [ Directives] ( /docs/directives ) - Directives and directive plugin documentation
@@ -31,9 +31,8 @@ The online documentation is comprised of the following sections:
3131
3232## Prerequisites
3333
34- Before getting started with BootstrapVue, you should have general familiarity with Vue functionality
35- and Bootstrap v{{ bootstrapVersionMajor }} CSS. If you are unfamiliar with Vue and/or Bootstrap,
36- some good starting points would be:
34+ This BootstrapVue documentation assumes you are familiar with Vue and and Bootstrap
35+ v{{ bootstrapVersionMajor }} CSS. Good starting points for these:
3736
3837- [ Vue Guide] ( https://vuejs.org/v2/guide/ )
3938- [ Vue API] ( https://vuejs.org/v2/api/ )
@@ -64,8 +63,8 @@ the normalization of cross browser styles. Refer to the following sub-sections f
6463
6564### HTML5 doctype
6665
67- Bootstrap requires the use of the ` HTML5 ` doctype. Without it, you _ may _ see some funky incomplete
68- styling, but including it shouldn't cause any considerable hiccups .
66+ Bootstrap requires the use of the ` HTML5 ` doctype. Without it, you may see some strange incomplete
67+ styling.
6968
7069``` html
7170<!doctype html>
@@ -76,9 +75,9 @@ styling, but including it shouldn't cause any considerable hiccups.
7675
7776### Responsive meta tag
7877
79- Bootstrap is developed for mobile first, a strategy in which code is optimized for mobile devices
80- first and then scales up components as necessary using CSS media queries. To ensure proper rendering
81- and touch zooming for all devices, ** add the responsive viewport meta** tag to your ` <head> ` .
78+ Bootstrap is optimized for mobile devices first and then scales up components as necessary using CSS
79+ media queries. To ensure proper rendering and touch zooming for all devices, ** add the responsive
80+ viewport meta** tag to your ` <head> ` .
8281
8382``` html
8483<meta name =" viewport" content =" width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -113,88 +112,70 @@ browsers and devices while providing slightly more opinionated resets to common
113112
114113## Using module bundlers
115114
116- If you are using module bundlers like [ Webpack] ( https://webpack.js.org/ ) ,
117- [ Parcel] ( https://parceljs.org/ ) or [ rollup.js] ( https://rollupjs.org/ ) , you may prefer to directly
118- include the package into your project. To get started , use ` yarn ` or ` npm ` to get the latest version
119- of Vue.js, BootstrapVue and Bootstrap v4:
115+ Most likely you are using module bundlers like [ Webpack] ( https://webpack.js.org/ ) ,
116+ [ Parcel] ( https://parceljs.org/ ) or [ rollup.js] ( https://rollupjs.org/ ) , which makes it easy to
117+ directly include the package into your project. To do this , use ` npm ` or ` yarn ` to get the latest
118+ version of Vue.js, Bootstrap v4 and BootstrapVue :
120119
121120``` bash
122121# With npm
123- npm install vue bootstrap-vue bootstrap
122+ npm install vue bootstrap bootstrap-vue
124123
125124# With yarn
126- yarn add vue bootstrap-vue bootstrap
125+ yarn add vue bootstrap bootstrap-vue
127126```
128127
129- Then, register BootstrapVue in your app entry point:
128+ Then, register BootstrapVue in your app entry point (typically ` app.js ` or ` main.js ` ) :
130129
131130``` js
132131// app.js
133132import Vue from ' vue'
134133import { BootstrapVue , IconsPlugin } from ' bootstrap-vue'
135134
136- // Install BootstrapVue
135+ // Import Bootstrap an BootstrapVue CSS files (order is important)
136+ import ' bootstrap/dist/css/bootstrap.css'
137+ import ' bootstrap-vue/dist/bootstrap-vue.css'
138+
139+ // Make BootstrapVue available throughout your project
137140Vue .use (BootstrapVue)
138141// Optionally install the BootstrapVue icon components plugin
139142Vue .use (IconsPlugin)
140143```
141144
142- And import Bootstrap and BootstrapVue ` css ` files:
145+ ### Theming Bootstrap
143146
144- ``` js
145- // app.js
146- import ' bootstrap/dist/css/bootstrap.css'
147- import ' bootstrap-vue/dist/bootstrap-vue.css'
148- ```
147+ If you want to change Bootstrap's default styles (e.g. the ` $body-color ` ), you have to use
148+ Bootstrap's and BootstrapVue's ` scss ` files.
149149
150- ** Alternatively** you can import Bootstrap and BootstrapVue ` scss ` files in a custom SCSS file:
150+ Create your own ` scss ` file (e.g. ` app.scss ` ) containing ** both** your custom definitions ** and**
151+ the 2 ` @import ` 's at the end:
151152
152153``` scss
153- // custom.scss
154+ // app.scss
155+
156+ // Define variable defaults
157+ $body-bg : #000 ;
158+ $body-color : #111 ;
159+
160+ // Then import Bootstrap an BootstrapVue SCSS files (order is important)
154161@import ' node_modules/bootstrap/scss/bootstrap.scss'
155162@import ' node_modules/bootstrap-vue/src/index.scss'
156163```
157164
158- Make sure to import the ` custom. scss` file in your app entry point :
165+ Then import that single ` scss ` file into your project :
159166
160167``` js
161168// app.js
162- import ' ./custom.scss'
163- ```
164-
165- Be sure to ` @import ` or define your custom variable values _ before_ including Bootstrap SCSS
166- (` bootstrap.scss ` ), and include BootstrapVue SCSS (` bootstrap-vue.scss ` ) _ after that_ to ensure
167- variables are set up correctly.
168-
169- Place all of the SCSS ` @import ` s into a ** single SCSS file** , and import that single file into your
170- project. Importing individual SCSS files into your project will ** not** share variable values and
171- functions between files by default.
172-
173- Webpack and Parcel support prepending the ` scss ` modules with tilde paths (` ~ ` ) when importing from
174- a ` scss ` file:
169+ import Vue from ' vue'
170+ import { BootstrapVue } from ' bootstrap-vue'
175171
176- ``` scss
177- // Webpack example
178- @import ' ~bootstrap'
179- @import ' ~bootstrap-vue'
180- ```
172+ import ' ./app.scss'
181173
182- ``` scss
183- // Parcel example
184- @import ' ~bootstrap/scss/bootstrap.scss'
185- @import ' ~bootstrap-vue/src/index.scss'
174+ Vue .use (BootstrapVue)
186175```
187176
188- For more details how to configure asset loading and how modules are resolved, please consult the
189- module bundlers documentation.
190-
191- ** Notes** :
192-
193- - Webpack configuration to load CSS files
194- ([ official guide] ( https://webpack.js.org/guides/asset-management/#loading-css ) )
195- - Webpack Loader for SASS/SCSS files ([ official guide] ( https://webpack.js.org/loaders/sass-loader/ ) )
196- - Parcel CSS ([ official guide] ( https://parceljs.org/css.html ) )
197- - Parcel SCSS ([ official guide] ( https://parceljs.org/scss.html ) )
177+ Do not import the individual SCSS files separately into your project, because variables and
178+ functions will fail to be shared between files.
198179
199180For information on theming Bootstrap, check out the [ Theming] ( /docs/reference/theming ) reference
200181section.
@@ -256,6 +237,34 @@ See the [Vue.js](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-v
256237Guide for full details on setting up aliases for [ webpack] ( https://webpack.js.org/ ) ,
257238[ rollup.js] ( https://rollupjs.org/ ) , [ Parcel] ( https://parceljs.org/ ) , etc.
258239
240+ ### Advanced module bundler usage
241+
242+ Webpack and Parcel support prepending the ` scss ` modules with tilde paths (` ~ ` ) when importing from
243+ a ` scss ` file:
244+
245+ ``` scss
246+ // Webpack example
247+ @import ' ~bootstrap'
248+ @import ' ~bootstrap-vue'
249+ ```
250+
251+ ``` scss
252+ // Parcel example
253+ @import ' ~bootstrap/scss/bootstrap.scss'
254+ @import ' ~bootstrap-vue/src/index.scss'
255+ ```
256+
257+ For more details how to configure asset loading and how modules are resolved, please consult the
258+ module bundlers documentation.
259+
260+ ** Notes** :
261+
262+ - Webpack configuration to load CSS files
263+ ([ official guide] ( https://webpack.js.org/guides/asset-management/#loading-css ) )
264+ - Webpack Loader for SASS/SCSS files ([ official guide] ( https://webpack.js.org/loaders/sass-loader/ ) )
265+ - Parcel CSS ([ official guide] ( https://parceljs.org/css.html ) )
266+ - Parcel SCSS ([ official guide] ( https://parceljs.org/scss.html ) )
267+
259268## Tree shaking with module bundlers
260269
261270When using a module bundler you can optionally import only specific components groups (plugins),
0 commit comments