From a54061249d61e1839036fca7ba6e366c0562e385 Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Tue, 7 Jul 2020 13:54:01 +0200
Subject: [PATCH] separate base css to allow bootstrap overrides

---
 app/src/App.vue                  |  4 ++++
 app/src/plugins/bootstrap-vue.js |  5 ++---
 app/src/scss/_variables.scss     |  3 +++
 app/src/scss/main.scss           | 16 ++++++++++++++++
 4 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 app/src/scss/_variables.scss
 create mode 100644 app/src/scss/main.scss

diff --git a/app/src/App.vue b/app/src/App.vue
index 1429533d..fd63e30c 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -8,3 +8,7 @@
         <router-view/>
     </div>
 </template>
+
+<style lang="scss">
+@import '@/scss/main.scss';
+</style>
diff --git a/app/src/plugins/bootstrap-vue.js b/app/src/plugins/bootstrap-vue.js
index 22a88fe6..31fda74a 100644
--- a/app/src/plugins/bootstrap-vue.js
+++ b/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)
diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
new file mode 100644
index 00000000..6c636972
--- /dev/null
+++ b/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`
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
new file mode 100644
index 00000000..ff30fac7
--- /dev/null
+++ b/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%;
+}