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:
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:
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
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:
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