@@ -104,10 +104,11 @@ browsers and devices while providing slightly more opinionated resets to common
104
104
105
105
## Using module bundlers
106
106
107
- If you are using module bundlers like [ webpack] ( https://webpack.js.org/ ) ,
108
- [ rollup.js] ( https://rollupjs.org/ ) , etc, you may prefer to directly include the package into your
109
- project. To get started, use ` yarn ` or ` npm ` to get the latest version of Vue.js, BootstrapVue and
110
- Bootstrap v4:
107
+ If you are using module bundlers like [ Webpack] ( https://webpack.js.org/ ) ,
108
+ [ Parcel] ( https://parceljs.org/ ) or [ rollup.js] ( https://rollupjs.org/ ) ,
109
+ you may prefer to directly include the package into your project.
110
+ To get started, use ` yarn ` or ` npm ` to get the latest version of Vue.js,
111
+ BootstrapVue and Bootstrap v4:
111
112
112
113
``` bash
113
114
# With npm
@@ -117,7 +118,7 @@ npm install vue bootstrap-vue bootstrap
117
118
yarn add vue bootstrap-vue bootstrap
118
119
```
119
120
120
- Then, register BootstrapVue plugin in your app entry point:
121
+ Then, register BootstrapVue in your app entry point:
121
122
122
123
``` js
123
124
// app.js
@@ -143,9 +144,11 @@ Or import Bootstrap and BootstrapVue `scss` files via a single custom SCSS file:
143
144
@import ' node_modules/bootstrap-vue/src/index.scss' ;
144
145
```
145
146
147
+ Finally import the ` custom.scss ` file in your app entry point:
148
+
146
149
``` js
147
150
// app.js
148
- import ' custom.scss'
151
+ import ' ./ custom.scss'
149
152
```
150
153
151
154
Be sure to ` @import ` or define your custom variable values _ before_ including Bootstrap SCSS
@@ -156,8 +159,28 @@ Place all of the SCSS `@import`s into a **single SCSS file**, and import that si
156
159
project. Importing individual SCSS files into your project will ** not** share variable values and
157
160
functions between files by default.
158
161
159
- ** Note** : Requires webpack configuration to load CSS/SCSS files
162
+ Webpack and Parcel support prepending the ` scss ` modules with tilde paths (` ~ ` ) when importing from a ` scss ` file:
163
+
164
+ ``` scss
165
+ // Webpack example
166
+ @import ' ~bootstrap' ;
167
+ @import ' ~bootstrap-vue' ;
168
+ ```
169
+
170
+ ``` scss
171
+ // Parcel example
172
+ @import ' ~bootstrap/scss/bootstrap' ;
173
+ @import ' ~bootstrap-vue/src/index.scss' ;
174
+ ```
175
+
176
+ For more details how to configure asset loading and how modules are resolved, please consult the module bundlers documentation.
177
+
178
+ ** Notes** :
179
+ * Webpack configuration to load CSS files
160
180
([ official guide] ( https://webpack.js.org/guides/asset-management/#loading-css ) ).
181
+ * Webpack Loader for SASS/SCSS files ([ official guide] ( https://webpack.js.org/loaders/sass-loader/ ) )
182
+ * Parcel CSS ([ official guide] ( https://parceljs.org/css.html ) )
183
+ * Parcel SCSS ([ official guide] ( https://parceljs.org/scss.html ) )
161
184
162
185
For information on theming Bootstrap, check out the [ Theming] ( /docs/reference/theming ) reference
163
186
section.
0 commit comments