问题描述：
在样式引入时，对于变量的引入，需要在每个文件里都要引入一遍，为了避免每次使用时都需要单独引入一遍的问题，采用了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 编译器，我引用了一些全局变量，如果你找不到的时候，从我这儿来拿。