@@ -11,11 +11,11 @@ colors, etc) adjust the custom BootstrapVue css generation.
1111
1212## SASS variable defaults
1313
14- Every Sass variable in Bootstrap v4 includes the ` !default ` flag allowing you to override the
15- variable��s default value in your own Sass without modifying Bootstrap and BootstrapVue's source SCSS
16- code. Copy and paste variables as needed, modify their values, and remove the ` !default ` flag. If a
17- variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap
18- and BootstrapVue.
14+ Every Sass variable in Bootstrap v4 and BootstrapVue includes the ` !default ` flag allowing you to
15+ override the variable’s default value in your own Sass without modifying Bootstrap and
16+ BootstrapVue's source SCSS code. Copy and paste variables as needed, modify their values, and remove
17+ the ` !default ` flag. If a variable has already been assigned, then it won’t be re-assigned by the
18+ default values in Bootstrap and BootstrapVue.
1919
2020You will find the complete list of Bootstrap’s variables in ` bootstrap/scss/_variables.scss ` . Some
2121variables are set to ` null ` , these variables don’t output the property unless they are overridden in
@@ -82,6 +82,8 @@ docs for more details. All theme colors automatically become available as
8282Customize Bootstrap 4 with the built-in custom variables file and easily toggle global CSS
8383preferences with Bootstrap's ` $enable-* ` Sass variables.
8484
85+ ### Bootstrap SASS variables
86+
8587Some commonly used Bootstrap v4 variables are:
8688
8789| Variable | Type | Default | Description |
@@ -96,6 +98,8 @@ Some commonly used Bootstrap v4 variables are:
9698Refer to [ Bootstrap's theming] ( https://getbootstrap.com/docs/4.3/getting-started/theming/ ) docs for
9799additional Bootstrap v4 variable information.
98100
101+ ### BootstrapVue SASS variables
102+
99103BootstrapVue also defines several Sass variables for controlling BootstrapVue's custom CSS
100104generation. If you are not using these features in your project, you can disable the feature's CSS
101105generation to reduce the size of BootstrapVue's custom CSS bundle:
@@ -114,14 +118,16 @@ Note that BootstrapVue's custom SCSS relies on Bootstrap's SASS variables, funct
114118## Generating custom themes
115119
116120To use your own theme and colors in BootstrapVue, you will need to create a ` custom.scss ` file in
117- your project, which you can include in your main app:
121+ your project, which you can include in your main app ` app.vue ` file :
118122
119123** Via template:**
120124
121125``` html
122126<style lang =" scss" >
123- // Import custom SASS variable overrides
124- @import ' assets/custom.scss' ;
127+ // Import custom SASS variable overrides, or alternatively
128+ // define your variable overrides here instead
129+ @import ' assets/custom-vars.scss' ;
130+
125131 // Import Bootstrap and BootstrapVue source SCSS files
126132 @import ' ~bootstrap/scss/bootstrap.scss' ;
127133 @import ' ~bootstrap-vue/src/index.scss' ;
@@ -130,17 +136,22 @@ your project, which you can include in your main app:
130136 body {
131137 margin : 0 ;
132138 }
139+
140+ .my-widget {
141+ color : var (--danger );
142+ }
133143 // ...
134144</style >
135145```
136146
137- The `custom.scss` file, which needs to be loaded before Bootstrap's SCSS and BootstrapVue's SCSS,
147+ The `custom-vars .scss` file, which needs to be loaded before Bootstrap's SCSS and BootstrapVue's SCSS,
138148will include your Bootstrap v4 variable overrides (i .e . colors, shadows, font sizes, breakpoints,
139149etc).
140150
141151** Via app main entry point:**
142152
143- Create an SCSS file with your custom theme variables:
153+ Create an SCSS file with your custom theme variables which also impoerts Bootstrap and BootstrapVue's
154+ SCSS:
144155
145156```scss
146157// File: custom.scss
@@ -165,10 +176,14 @@ $bv-enable-table-stacked: false;
165176body {
166177 margin : 0 ;
167178}
179+
180+ .my-widget {
181+ color : var (--danger );
182+ }
168183// ...
169184```
170185
171- Then import that single SCSS file into your app code entry point:
186+ Then import that single SCSS file into your main app code entry point:
172187
173188```js
174189// app.js
@@ -199,7 +214,8 @@ general prototyping.
199214
200215### Available Bootstrap CSS variables
201216
202- Here are the variables that are generated. The values shown are based on the Bootstrap v4 defaults:
217+ Here are the CSS variables that are generated. The values shown are based on the Bootstrap v4
218+ _defaults_:
203219
204220```scss
205221:root {
0 commit comments