問題描述：
在樣式引入時，對於變量的引入，需要在每個文件里都要引入一遍，為了避免每次使用時都需要單獨引入一遍的問題，采用了style-resources-loader
解決方案：
步驟1：在項目目錄下安裝該插件 npm install stylus-resources-loader --save-dev 或者 vue add style-resources-loader
步驟2：然后會有一個讓選擇語言的選項CSS Pre-processor?，選擇當前應用的語法，scss、sass、stylus和less，我目前選擇的是stylus
步驟3：在項目根目錄下的vue.config.js(沒有需要新建)下修改配如下截圖：
然后重啟一下項目，運行 npm run serve 就可以了
至於為什么直接在main.js里引入一個index.styl文件也不生效的我也有困惑
問：關於這個變量模板的引入，不是已經在 index.styl 引入了么，和 icon.styl 和 reset.styl 一樣，我困惑的是既然引入了 ，為什么在單文件里還需要引入這個變量模板，但是別的不需要再重復引入了，比如 icon.styl
答：從 stylus 編譯的角度去思考這個問題，當你去編譯某個組件的 stylus 文件，它使用了某個變量，如果沒有去 import variable，它怎么知道這個變量是什么。你所謂的 index，只是你認為它是首頁，但是對 stylus 編譯器來說它卻一無所知。而 style-resource-loader 做的事情，才是告訴 stylus 編譯器，我引用了一些全局變量，如果你找不到的時候，從我這兒來拿。
參考地址1：http://www.pianshen.com/article/591366072/
參考地址2：https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
參考地址3：https://cli.vuejs.org/zh/guide/css.html#%E8%87%AA%E5%8A%A8%E5%8C%96%E5%AF%BC%E5%85%A5