add custom scss for bootstrap

assets/scss/custom.scss

@@ -1,57 +1,12 @@
-$primary: #359499;
+$theme-colors: (
-$secondary: #98ddde;
+  'primary': #145bea,
-$success: #81894e;
+  'secondary': #833bec,
-$info: #185190;
+  'success': #1ce1ac,
-$warning: #ffdb3b;
+  'info': #ff7d50,
-$danger: #f36e60;
+  'warning': #ffbe0b,
-$light: #f5fbfb;
+  'danger': #ff007f,
-$dark: #040b0c;
+  'light': #c0ccda,
+  'dark': #001738,
+);
 
-$link-hover-decoration: none;
+@import '~/node_modules/bootstrap/scss/bootstrap.scss';
-$border-radius: 0;
-$font-family-sans-serif: "Fira Sans", sans-serif;
-$font-family-monospace: "Fira Mono", monospace;
-$font-weight-bold: 600;
-
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/type";
-@import "~bootstrap/scss/images";
-// @import "~bootstrap/scss/code";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/button-group";
-// @import "~bootstrap/scss/input-group";
-@import "~bootstrap/scss/custom-forms";
-@import "~bootstrap/scss/nav";
-@import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/breadcrumb";
-// @import "~bootstrap/scss/pagination";
-// @import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/jumbotron";
-// @import "~bootstrap/scss/alert";
-// @import "~bootstrap/scss/progress";
-// @import "~bootstrap/scss/media";
-@import "~bootstrap/scss/list-group";
-// @import "~bootstrap/scss/close";
-// @import "~bootstrap/scss/toasts";
-// @import "~bootstrap/scss/modal";
-// @import "~bootstrap/scss/tooltip";
-// @import "~bootstrap/scss/popover";
-// @import "~bootstrap/scss/carousel";
-// @import "~bootstrap/scss/spinners";
-@import "~bootstrap/scss/utilities";
-// @import "~bootstrap/scss/print";
-
-::selection {
-  background-color: $primary;
-  color: #fff;
-}

nuxt.config.js

@@ -18,7 +18,7 @@ export default {
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
-  css: [{ src: "@/assets/scss/custom", lang: "scss" }],
+  css: ['@/assets/scss/custom.scss'],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [],
@@ -32,6 +32,20 @@ export default {
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: ['bootstrap-vue/nuxt'],
 
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+    ],
+  },
+
+  bootstrapVue: {
+    bootstrapCSS: false,
+    icons: true,
+  },
+
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {}
 };

package.json

@@ -13,7 +13,7 @@
     "bootstrap-vue": "^2.21.2",
     "core-js": "^3.15.0",
     "nuxt": "^2.15.7",
-    "sass-loader": "^12.1.0",
+    "sass-loader": "^10.1.1",
     "node-sass": "^6.0.1",
     "bootstrap": "^5.0.2"
     

plugins/bootstrap.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+Vue.use(BootstrapVue)
+Vue.use(IconsPlugin)