SASS variables do not work if vue project path is changed

[davydnorris]

I often insert Vue client projects into a node server based app and have the node app serve the Vue components. Rather than have two separate projects, I combine them into a single one, and then alter vue.config.js so that vue finds the client as so:

module.exports = {
    outputDir: 'client/dist',

    transpileDependencies: ['vuetify'],

    configureWebpack: {
        context: __dirname + '\\client\\',
        resolve: {
            alias: {
                '@': __dirname + '\\client\\src'
            }
        }
    },
}

This has worked fine for my Vuetify projects until my latest where I needed to use SASS variables, and I found they were not being picked up. Upon digging I found that the path to the variables.scss/sass file is hard coded in this line:

vue-cli-plugins/packages/vue-cli-plugin-vuetify/util/helpers.js

Line 13 in a117597

if (!fileExists(api, `src/${path}`)) continue

Can this line be changed so that it uses a relative path, or even the '@' alias? What is a bit annoying is that the generated import statement does use the '@', so it's just the line that searches for the file that's broken

[davydnorris]

I found a hack to get things to work, but it's not pretty.

I had to create the expected directory structure in the root of my project and then create an empty file named /src/sass/variables.scss, but I had to leave the real file in the relative location.

Simply moving the file didn't work because the helper.js code adds the '@' when constructing the import path

[davydnorris]

Condensed into new issue #187