Can't automatically import Stylus file to VueJS project

Question

For the past 2 days, I've been trying to figure out how to import a global stylus file into all of my components so that I don't end up with `@import '../../../styles.styl' in each component or ever need to adjust that. I've used the configuration given by VueJS here and I still can't figure it out. I've tried various different configurations, but every time it either doesn't recognize 'style-resources-loader' and gives me an error before even building, or it seems to build and then errors out because it doesn't recognize the stylus variables I'm using in my components. Giving me this error:

Module build failed (from ./node_modules/stylus-loader/index.js):
Error: C:\filepath\ViewTitle.vue:27:25
   23|     color white
   24|     font-family 'Xiomara'
   25|     letter-spacing 0.25rem
   26|     text-align center
   27|     text-shadow 0 0 8px rgba(light, 0.1)
-------------------------------^
   28| </style>

TypeError: expected rgba or hsla, but got function:light(color)

I've also tried the css: { loaderOptions: { stylus: prependData: "@import './assets/styles/styles.styl'" } } } and that has not worked either. Any thoughts?

Edit: This is what my variables look like:

peppermint = #FBAAA6
dusk = #135A8B
gold = #F0D355
dark = #062236
light = #EFF2F3

I have them stored in ./assets/styles/config/vars.styl, then the file I'm trying to import is in ./assets/styles/styles.styl and that file imports the vars.styl

Solution: For anyone having the same issue, I ended up just starting over. Luckily I wasn't too deep into the project, so it only set me back a few hours. Using the code in the Auto Import section of the VueJS documentation worked fine after starting fresh.