Option to allow use a scss config (#23)

* Enhancement: add option to use a scss config

* fix: move webpack mod

* fix: eslint import/no-extraneous-dependencies

* refactor: update app in scss option

* refactor: update app in scss option

* fix: rename scss/_custom.scss file

* comment all variables

* fix: bootstrap variables import

* fix: remove polyfill from dev deps to deps (eslint error)

Author: fm96-dev

generator/helpers.js

@@ -53,6 +53,18 @@ module.exports = function (api) {
 
       content = lines.join('\n')
       fs.writeFileSync(mainPath, content, { encoding: 'utf8' })
+    },
+
+    //TODO: refactor since is equal to updateMain
+    updateApp(callback){
+      const appPath = api.resolve('./src/App.vue')
+
+      let content = fs.readFileSync(appPath, { encoding: 'utf8' })
+      let lines = content.split(/\r?\n/g)
+        lines = callback(lines)
+
+      content = lines.join('\n')
+      fs.writeFileSync(appPath, content, { encoding: 'utf8' })
     }
   }
 }

generator/index.js

@@ -3,30 +3,30 @@ module.exports = (api, opts, rootOpts) => {
 
   api.extendPackage({
     dependencies: {
-      'bootstrap-vue': '^2.17.3'
-    },
-    devDependencies: {
+      'bootstrap-vue': '^2.17.3',
       'bootstrap': '^4.5.2',
       'popper.js': '^1.16.1',
-      'portal-vue': '^2.1.7',
+      'portal-vue': '^2.1.7'
+    },
+    devDependencies: {
       'sass': '^1.26.11',
       'sass-loader': '^10.0.2',
     }
   })
 
   if (opts.usePolyfill) {
     api.extendPackage({
-      devDependencies: {
+      dependencies: {
         '@babel/polyfill': '^7.11.5',
         'mutationobserver-shim': '^0.3.7'
       }
     })
   }
 
   // Render bootstrap-vue plugin file
-  api.render({
-    './src/plugins/bootstrap-vue.js': './templates/default/src/plugins/bootstrap-vue.js'
-  }, opts)
+  const templateName = opts.useScss ? 'scss' : 'default'
+  api.render(`./templates/${templateName}`)
+
 
   // adapted from https://github.com/Akryum/vue-cli-plugin-apollo/blob/master/generator/index.js#L68-L91
   api.onCreateComplete(() => {
@@ -39,6 +39,36 @@ module.exports = (api, opts, rootOpts) => {
       return src
     })
 
+    if(opts.useScss){
+      
+
+      //Modify App.vue (import bootstrap styles)
+      helpers.updateApp(src => {
+        let styleBlockIndex = src.findIndex(line => line.match(/^<style/))
+
+        if(styleBlockIndex === -1){ //no style block found
+          //create it with lang scss
+          src.push(`<style lang="scss">`)
+          src.push(`</style>`)
+
+          styleBlockIndex = src.length - 2
+        }
+        else{
+          //check if has the attr lang="scss"
+          if(!src[styleBlockIndex].includes('lang="scss')){
+            //if not, replace line with lang="scss"
+            src[styleBlockIndex] = '<style lang="scss">'
+          }
+        }
+
+        const bootstrapImportString = `@import "~@/assets/scss/vendors/bootstrap-vue/index";\n`
+        src.splice(styleBlockIndex + 1, 0, bootstrapImportString)
+
+        return src
+      })
+    }
+    
+
     // Add polyfill
     if (opts.usePolyfill) {
       helpers.updateBabelConfig(cfg => {