stylus是css預處理器。還有另外兩種css預處理器語言詳解：less、sass。
不懂的可以先看一下這篇文章：stylus預處理入門
在vue項目引入stylus css預處理器，可以讓我們的css也可以更加靈活?？梢钥匆幌聢D中的stylus 文件，以styl結(jié)尾。

image.png

在寫基于vue-cli的vue項目時，如果直接引入styl文件，會報錯，需要安裝stylus、stylus-loader依賴以及別名配置。其實使用styl文件很簡單，但是剛開始搞，還是會搞死人的。具體的步驟如下：

1 安裝stylus、stylus-loader依賴

推薦cnpm，因為快。進入項目文件下，使用命令

cnpm install stylus stylus-loader

2 package.json文件配置

上述命令并不會幫我們安裝到配置文件，需要我們自己配置下，如下，添加上這兩項配置

"devDependencies": {
    ...
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    ...
  },

3 別名配置

配置別名為了在引用的時候，程序能夠加載正確的路徑。
打開文件根目錄下 build >webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'src': resolve('src'),
      '@': resolve('src'),
      'common':resolve('src/common')
    }
  },

• common :別名
• 'src/common' :styl路徑

這樣我們就可以使用common引入styl文件了。

引入

我們將組合的樣式匯集在index.styl中
目錄結(jié)構(gòu)：

image.png

index.styl

在main.js中引入index.styl

import Vue from 'vue'
import App from './App'
// import router from './router'
import 'common/stylus/index.styl'

在組件中引入

<style scoped lang="stylus">
  @import "~common/stylus/variable.styl"
  #app
    color: $color-theme
</style>