package.json

@@ -18,6 +18,8 @@
     "core-js": "^3.6.5",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.0.0",
+    "sass": "^1.37.5",
+    "sass-loader": "^10.2.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0"
   }

src/assets/global.scss

@@ -2,7 +2,9 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+@import "variables";
+@import "bootstrap/scss/bootstrap";
+
 .container{
   min-height: calc(100vh - 70px - 24px);
 }
-  

src/assets/variables.scss

@@ -0,0 +1 @@
+$primary: #0790a9;

src/main.js

@@ -5,8 +5,7 @@ import router from './router'
 
 import axios from 'axios'
 
-import 'bootstrap/dist/css/bootstrap.min.css'
-import './assets/custom.css'
+import './assets/global.scss'
 
 const app = createApp(App)