vue-cli3关于样式引入的问题----style-resources-loader

vue-cli3关于样式引⼊的问题----style-resources-loader
问题描述：
在样式引⼊时，对于变量的引⼊，需要在每个⽂件⾥都要引⼊⼀遍，为了避免每次使⽤时都需要单独引⼊⼀遍的问题，采⽤了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 编译器，我引⽤了⼀些全局变量，如果你找不到的时候，从我这⼉来拿。