关于样式引入的问题

Question

1.老师，在main.js里直接引用了index.styl，背景颜色生效（是自定义的变量，在variable.styl里），为什么在app.vue页面里还需要单独引入variable.styl呢，在index.styl里不是都统一引入了么（要是不引入，在vue页面里写的变量颜色不生效），想请教一下老师，这是为什么呢
2.引入style-resource-loader，配置之后可以不用单独引入样式

Answer 1

ustbhuangyi 2019-05-31 09:45:30

其实 index.styl 中引入 variable.styl 没多大意义的，variable.styl 你可以理解为一个变量模块，在需要的时候被引入，所以组件中需要单独引入。
style-resource-loader 这个是为了全局共享变量模块的吧。

• 提问者 wangcheng3785233 #1

  老师，关于这个变量模板的引入 不是已经在index引入了么 通过base引入的，和icon.styl和reset.styl一样，我困惑的是既然引入了 ，为什么在单文件里还需要引入这个变量模板，但是别的不需要再重复引入了，比如icon.styl

• ustbhuangyi 回复 提问者 wangcheng3785233 #2

  你从 stylus 编译的角度去思考这个问题，当你去编译某个组件的 stylus 文件，它使用了某个变量，如果没有去 import variable，它怎么知道这个变量是什么。你所谓的 index，只是你认为它是首页，但是对 stylus 编译器来说它却一无所知。而 style-resource-loader 做的事情，才是告诉 stylus 编译器，我引用了一些全局变量，如果你找不到的时候，从我这儿来拿。

• 提问者 wangcheng3785233 #3

  非常感谢！