基于Vue的前端開發越來越流行，有時我們需要在多個組件中使用共同的樣式，這就需要全局導入樣式。

npm install -D stylus stylus-loader

首先，我們需要在Vue項目中安裝stylus和stylus-loader，可以通過上述命令進行安裝。

module.exports = {
css: {
loaderOptions: {
stylus: {
import: ['~@/assets/style/variable.styl']
}
}
}
}

然后，在vue.config.js中添加上述代碼，在項目中全局導入variable.styl文件，其中~表示項目根目錄。

/* variable.styl */
$color-primary = #42b983

在variable.styl文件中我們可以定義全局變量，例如上述代碼中定義了主色調變量$color-primary。

/* App.vue */
<style lang="stylus">
.mainColor
color $color-primary
</style>

在組件的樣式中，我們就可以通過變量來使用全局樣式。

如果要同時導入多個樣式文件，可以在vue.config.js中通過@import語句進行導入。

module.exports = {
css: {
loaderOptions: {
stylus: {
import: [
'~@/assets/style/variable.styl',
'~@/assets/style/mixin.styl'
]
}
}
}
}

其中，mixin.styl為另一個樣式文件。

/* mixin.styl */
ellipsis()
overflow: hidden
text-overflow: ellipsis
white-space: nowrap

在樣式文件中，我們不僅可以定義變量，還可以定義全局的樣式函數，例如上述代碼中定義了一個ellipsis的函數。

/* App.vue */
<style lang="stylus">
@import "~@/assets/style/mixin.styl"
.mainColor
color $color-primary
.ellipsis
ellipsis()
</style>

在組件樣式中我們不僅可以使用全局變量，還可以使用全局樣式函數。例如上述代碼中“.ellipsis”就使用了定義的ellipsis函數。

需要注意的是，全局樣式在項目中很常見，但過多的全局樣式可能會影響組件的封裝性，因此建議謹慎使用并根據實際情況進行決策。