vue中 stylus 变量无法全局访问该如何引入？

添加一个公共样式variable.styl样式，包含一些公共的变量

// 颜色
$color-mainFont = #333333
$color-placeholder = #aaaaaa
$color-inputborder = #e5e5e5
$color-buttonSure = #5783e6
$color-buttonCancle = #999999


// 字体
$font-size-large = 36px
$font-size-medium = 18px
$font-size-small = 16px

如何全局引入？需要在build/utils.js的generateLoaders方法下做如下修改

const stylusOptions = {
    import: [
        path.join(__dirname, "../src/styles/variable.styl"), // variables.styl全局变量文件
    ],
    paths: [
        path.join(__dirname, "../src/styles/"),
        path.join(__dirname, "../"),
    ],

return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders(‘less’),
sass: generateLoaders(‘sass’, { indentedSyntax: true }),
scss: generateLoaders(‘sass’),
stylus: generateLoaders(‘stylus’,stylusOptions),
styl: generateLoaders(‘stylus’,stylusOptions)
}
具体原因可查看
https://vue-loader-v14.vuejs.org/zh-cn/configurations/pre-processors.html