stylus 全局导入后，为何还要在App.vue 中再次导入？

[HaoJie23]

common/index.styl
@import './base'
@import './icon'
@import './mixin'
此文件配置了需要全局导入的styl文件

main.js
......
import "@/common/stylus/index.styl";
......

main.js中全局导入

问题：
在App.vue中，为何还要再次导入？
.....
@import "common/stylus/mixin.styl"
....

否则以下代码会报错，但是别的样式却可以正常使用。
border-1px(rgba(7, 17, 27,0.1))

�测试了很多次依然无效，请问有什么办法可以全局一次性导入吗?

[halfmoonvic]

这个问题我是这样理解的。

1. 首先不光是 stylus 是这样需要在具体的 .vue 文件当中单独引入类似于 mixin 这样的宏文件。其他的诸如 sass，less也是需要单独引入，即便是在 main.js 文件当中引用过
2. 在 main.js 引入的 stylus 文件，是经过 stylus-loader 编译过，直接插入到头部标签处的<style></style>当中。
   自然，一些 宏与变量性质的代码也根本不是什么样式。也不会放置到<style></style>处的
3. 因为第二点的缘故，你使用了一些宏，而又未在当前文件当中查找到相关的引用。自然会报错