[Bug Report] Project styles/variables.scss has no effect when a preset is used

[blaflamme]

Environment

Vuetify Version: 2.2.6 Vue Version: 2.6.11 Browsers: Google Chrome OS: Mac OS 10.15.2

Steps to reproduce

1. Create a test app and add Vuetify

$ vue create test-app
$ cd test-app
$ vue add vuetify
$ yarn serve

You should see the welcome Vuetify start page.

2. Add a styles/variables.scss with a larger font size root:

$ mkdir src/styles; echo '$font-size-root: 18px;' > src/styles/variables.scss

At that point the default page should have a bigger font.

3. Add a preset:

$ vue add vuetify-preset-crane
$ yarn serve

At that point the default page should have different colours and a new font, but the size of the font is wrong and back to 16px. Try to increase or decrease the font size and nothing is happening.

Expected Behavior

The project styles/variables.scss should be merged with default and preset variables, override them and be injected to produce the right output.

Actual Behavior

The file is never used if a preset is installed

Reproduction Link

https://github.com/blaflamme/vuetify-variables-bug-app

Other comments

I was able to do a temporary workaround by...

1. Importing the preset variables in my project variables

# styles/variables.scss

@import "vue-cli-plugin-vuetify-preset-crane/preset/variables.scss";

$font-size-root: 18px;

2. Add a rule config to chainWebpack

# vue.config.js

const { mergeSassVariables } = require("@vuetify/cli-plugin-utils")

module.exports = {
  transpileDependencies: ["vuetify"],
  chainWebpack: config => {
    const modules = ["vue-modules", "vue", "normal-modules", "normal"]
    modules.forEach(match => {
      config.module
        .rule("sass")
        .oneOf(match)
        .use("sass-loader")
        .tap(opt => mergeSassVariables(opt, `'@/styles/variables.scss'`))
      config.module
        .rule("scss")
        .oneOf(match)
        .use("sass-loader")
        .tap(opt => mergeSassVariables(opt, `'@/styles/variables.scss';`))
    })
  }
}