Fix/append data vue config (#30)

* chore: add .vscode to gitignore

* fix(templates): scss: import all bootstrap by default

* chore: add lodash dep

* feat: add choice to inject vars, funcs & mixins

the user can choice if inject bootstrap's scss vars, functions & mixins in sfc components

Author: fm96-dev

.gitignore

@@ -59,3 +59,4 @@ typings/
 
 # next.js build output
 .next
+.vscode

bootstrapCssAbstractsImports.js

@@ -0,0 +1,7 @@
+module.exports = [
+  '@import "~bootstrap/scss/_functions.scss"',
+  '@import "~@/assets/scss/vendors/bootstrap-vue/_custom.scss"',
+  '@import "~bootstrap/scss/_variables.scss"',
+  '@import "~bootstrap/scss/_mixins.scss"',
+  '@import "~bootstrap-vue/src/_variables.scss"',
+]

generator/templates/scss/src/plugins/bootstrap-vue.js

@@ -1,7 +1,5 @@
 import Vue from 'vue'
 
-// import BootstrapVue from 'bootstrap-vue'
-import { ButtonPlugin } from 'bootstrap-vue'
+import BootstrapVue from 'bootstrap-vue'
 
-// Vue.use(BootstrapVue)
-Vue.use(ButtonPlugin)
+Vue.use(BootstrapVue)

index.js

@@ -1,3 +1,6 @@
+const { merge } = require('lodash/object')
+const bootstrapCssAbstractsImports = require('./bootstrapCssAbstractsImports')
+
 module.exports = (api, opts) => {
   // Resolve asset references from components
   api.chainWebpack(config => {
@@ -29,23 +32,17 @@ module.exports = (api, opts) => {
       })
   })
 
-  //Add bootstrap's variables globally
-      const bootstrapVueVarImports = [
-        '@import "~bootstrap/scss/_functions.scss"',
-        '@import "~@/assets/scss/vendors/bootstrap-vue/_custom.scss"',
-        '@import "~bootstrap/scss/_variables.scss"',
-        '@import "~bootstrap/scss/_mixins.scss"',
-        '@import "~bootstrap-vue/src/_variables.scss"',
-      ]
-
-      //add custom variables
-      opts.css.loaderOptions = {
+  //Add bootstrap's variables/functions/mixins globally
+  if(opts.useScss && opts.injectAbstracts){
+    merge(opts.css, {
+      loaderOptions:{
         sass: {
-          additionalData: bootstrapVueVarImports.join('\n')
+          additionalData: bootstrapCssAbstractsImports.join('\n')
         },
         scss: {
-          additionalData: [...bootstrapVueVarImports, ''].join(';\n')
+          additionalData: [...bootstrapCssAbstractsImports, ''].join(';\n')
         }
       }
-
+    })
+  }
 }

package-lock.json

@@ -33,5 +33,8 @@
   "homepage": "https://github.com/GregYankovoy/vue-cli-plugin-bootstrap-vue#readme",
   "devDependencies": {
     "@vue/cli-service": "^4.5.6"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
   }
 }

package.json

@@ -10,5 +10,12 @@ module.exports = [
     type: 'confirm',
     default: false,
     message: 'Use scss?'
+  },
+  {
+    when: answers => !!answers.useScss,
+    name: 'injectAbstracts',
+    type: 'confirm',
+    default: false,
+    message: 'Would you like to inject vars, functions and mixins in all SFC components?'
   }
 ]