vue-cli-plugins icon indicating copy to clipboard operation
vue-cli-plugins copied to clipboard

[Bug Report] variables.sass search location is hard coded - breaks if vue project path is changed

Open davydnorris opened this issue 3 years ago • 0 comments

Environment

Browsers: Firefox 78.0 OS: Windows 10

Steps to reproduce

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:

https://github.com/vuetifyjs/vue-cli-plugins/blob/master/packages/vue-cli-plugin-vuetify/util/helpers.js#L13

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. This means that 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, meaning that it looks for variables.sass in the hard coded directory but actually uses the relative file path.

Expected Behavior

variables.sass is detected and used from relative paths

Actual Behavior

variables.sass is looked for in a hard coded path, but used from a relative path

Reproduction Link

davydnorris avatar Jul 05 '20 03:07 davydnorris