separate base css to allow bootstrap overrides

app/src/App.vue

@@ -8,3 +8,7 @@
         <router-view/>
     </div>
 </template>
+
+<style lang="scss">
+@import '@/scss/main.scss';
+</style>

app/src/plugins/bootstrap-vue.js

@@ -1,7 +1,6 @@
 import Vue from 'vue'
-
 import BootstrapVue from 'bootstrap-vue'
-import 'bootstrap/dist/css/bootstrap.min.css'
+
-import 'bootstrap-vue/dist/bootstrap-vue.css'
+// Styles are imported in `src/App.vue` <style>
 
 Vue.use(BootstrapVue)

app/src/scss/_variables.scss

@@ -0,0 +1,3 @@
+// Bootstrap and BootstrapVue variable may be overrides here. Full list available here:
+// Bootstrap: `app/node_modules/bootstrap/scss/_variables.scss`
+// BootstrapVue: `app/node_modules/bootstrap-vue/src/_variables.scss`

app/src/scss/main.scss

@@ -0,0 +1,16 @@
+// This is the default scss file, more specific styling is defined directly into components.
+// It it imported in `scr/App.vue` style tag.
+
+// Bootstrap variable overrides and custom variables
+@import 'variables';
+
+// Includes Bootstrap and BootstrapVue SCSS files
+// `~` allow to import a node_modules folder (resolved by Webpack)
+@import '~bootstrap/scss/bootstrap.scss';
+@import '~bootstrap-vue/src/index.scss';
+
+// Style overrides happens after bootstrap imports
+body {
+    margin: auto;
+    max-width: 90%;
+}