在vue的開發中，使用stylus作為CSS預處理器的地位越來越重要。stylus是一種CSS預處理器，它具有更強的可讀性和可維護性，能夠使我們更加方便的管理CSS。在vue中，如何引用stylus，許多開發者都會遇到困擾。下面，就讓我們一起來看看vue怎么引用stylus。

首先，需要先安裝stylus。在命令行中輸入以下命令即可：

npm install stylus stylus-loader --save-dev

安裝完成后，我們需要在vue項目的webpack配置文件中進行配置。如果你使用的是vue-cli創建的項目，webpack配置文件在項目根目錄下的build目錄中。

找到webpack.base.conf.js文件，在rules中新增如下代碼：

{
test: /\.styl$/,
use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'stylus-loader']
}

上面的代碼中，我們使用了四個loader，分別是vue-style-loader、css-loader、postcss-loader和stylus-loader。vue-style-loader是vue-loader中的一個樣式loader，可以將樣式動態注入到DOM中。

接著，我們需要在組件中引入樣式文件。為了方便示例，我們新建一個單文件組件HelloWorld.vue。

在style標簽中，我們使用了stylus語法。scoped屬性的作用是將樣式作用域限制在當前組件中，避免樣式的類名沖突。

除了在單文件組件中引入樣式文件之外，我們還可以在main.js中全局引用樣式文件。示例如下：

import Vue from 'vue'
import App from './App.vue'
import './assets/styles/index.styl'
Vue.config.productionTip = false
new Vue({
render: h =>h(App),
}).$mount('#app')

上面的代碼中，我們使用了import命令引入了樣式文件index.styl。需要注意的是，在引入樣式文件時，需要使用相對路徑。

綜上所述，vue引用stylus的過程相對簡單。只需要安裝stylus并在webpack配置文件中進行配置，然后在組件或者全局中引入樣式文件即可。stylus的語法相比CSS更加簡潔明了，能夠讓我們更加方便地管理CSS樣式。