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 编译器，我引用了一些全局变量，若是你找不到的时候，从我这儿来拿。

 参考地址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