feat: customVariables

Author: kevinmarrec

README.md

@@ -32,6 +32,37 @@
 
 ## Module options
 
+### `customVariables`
+- Type: `Array`
+  - Items: `String`
+- Default: `[]`
+
+Provide a way to customize Vuetify SASS variables.  
+**Only works with [tree-shaking](#treeShake).**
+
+Usage example : 
+
+```scss
+// assets/variables.scss
+@import '~vuetify/src/styles/styles.sass';
+
+// The variables you want to modify
+$font-size-root: 14px;
+// For updating SASS lists
+$material-light: map-merge($material-light, ( cards: blue ));
+$btn-border-radius: 0px;
+```
+
+```js
+// nuxt.config.js
+export default {
+  vuetify: {
+    customVariables: ['~/assets/variables.scss']
+  }
+}
+```
+
+
 ### `defaultAssets`
 - Type: `Object` or `Boolean` 
 - Default: 

lib/module.js

@@ -2,6 +2,7 @@ const path = require('path')
 const merge = require('deepmerge')
 
 const defaults = {
+  customVariables: [],
   defaultAssets: {
     font: true,
     icons: true
@@ -32,6 +33,7 @@ module.exports = function (moduleOptions) {
     }
 
     // Customize sass-loader options
+    sassLoaderOptions.data = options.customVariables.map(path => `@import '${path}'`).join('\n')
     Object.assign(this.options.build.loaders.sass, sassLoaderOptions)
     Object.assign(this.options.build.loaders.scss, sassLoaderOptions)
 
@@ -73,6 +75,7 @@ module.exports = function (moduleOptions) {
 
     // Remove module options
     const vuetifyOptions = { ...options }
+    delete vuetifyOptions.customVariables
     delete vuetifyOptions.defaultAssets
     delete vuetifyOptions.treeShake
 

test/fixture/assets/variables.scss

@@ -0,0 +1 @@
+$font-size-root: 20px;

test/fixture/nuxt.config.js

@@ -15,6 +15,7 @@ module.exports = {
   ],
 
   vuetify: {
+    customVariables: ['~/assets/variables.scss'],
     theme: {
       dark: true,
       themes: {