search

ustbhuangyi / vue-sell

:rice: Vue.js高仿饿了么外卖App课程源码 http://coding.imooc.com/class/74.html
3.46k stars 1.36k forks source link

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

Open HaoJie23 opened 6 years ago

HaoJie23 commented 6 years ago

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 commented 6 years ago

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

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