如何在vue中全局引入stylus文件的变量

stylus是个好东西，兼容原生css的写法，简洁明了，功能强大。
最近开发项目中碰到一个问题，如何在全局中引入一次全局的stylus变量，而不用每个用到的文件都去引入一次，如果做不到全局引入，就会显得非常麻烦。
首先，题主想到的是直接在main.js中直接import进去，但是发现只有写死的样式才会生效，像我在这个base文件中定义的一些变量，在页面里根本不生效。
于是题主猜测，引入的时候，这个stylus文件就已经被编译成css文件并放在内联样式表里了，变量也被编译过了，所以在页面里再去使用，自然是找不到这个变量对应的值了。
后面度娘到了一个解决方案，照着敲了一下果然可以。
具体如下：

在build/utils.js的generateLoaders方法下做如下修改
 var stylusOptions = {
        import: [
            path.join(__dirname, "../src/common/base.styl"), // base.styl全局变量文件
        ]
    }
    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus', stylusOptions),
        styl: generateLoaders('stylus', stylusOptions),
    }

题主刚开始只配置了styl

styl: generateLoaders('stylus', stylusOptions),

而没有配置stylus

stylus: generateLoaders('stylus', stylusOptions),

记住这两个都必须要加入stylusOptions，否则不会生效。