Please ask questions on the forum or StackOverflow.

I think you have to import the stylus file in the style section

@posva I don't want to do in every vue file,Is any other way to do

but it is related to the vue-cli. Importing fonts doesn't work either.

In cli2 webpack's setting like following:

plugins: [
new webpack.LoaderOptionsPlugin({
options: {
stylus: {
import: [path.resolve(__dirname, '../src/stylus/variables.styl'), path.resolve(__dirname, '../src/stylus/extends.styl')]
}
}
})
]

In cli3 you can add file 'vue.config.js' and handle your webpack's setting like:

// vue.config.js
var path = require('path')
var webpack = require('webpack')

module.exports = {
configureWebpack: {
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
stylus: {
import: [path.resolve(__dirname, './src/stylus/variables.styl'), path.resolve(__dirname, './src/stylus/extends.styl')]
}
}
})
]
}
}

It works for me.

I just wanted to leave a note to say @sky790312 's comment above helped me figure this out.

My vue.config.js which works

// vue.config.js
var path = require('path');
module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        import: [path.resolve(__dirname, "src/stylus/variables")]
      }
    }
  }
};

How to import once