为什么每个页面都要引入global.scss

Question

1.已经在main.js中引入了global.scss，那px2rem不是应该为全局了吗，为什么vue文件中不再次引入global.scss就无法使用scss的方法呢?

2.如果是因为@function, @mixin这种属性不能全局使用，那为什么不单独弄一份文件各个页面引入呢，全局已经有gloabal.scss，别的页面还引入，那不是又引入了reset.css和transition.css等等，有点困惑，请老师解答一下

Answer 1

Sam 2019-03-24 11:06:01

你好，因为每个scss文件都是独立编译的，编译的目的是为了把scss文件转化为css文件，在编译过程中需要找到变量的引用，所以每个scss中都需要import global.scss。编译后，如果我们使用了异步模块（就是在router中使用import方法导入路由），那么每个模块都会编译出不同的css文件，最终在index.html中进行引用。所以各模块的css部分是相对独立的。

• 提问者 胡莱馒头 #1

  谢谢老师的回答，那可以这样理解吗？假设A.vue文件引入了global.scss，global.scss中引入了reset.css和mixin.scss，那最后这个模块被编译成的css文件是不是包含了该vue组件自身的css和reset.css和mixin.scss这三个，最后再被引入到index.html

• 提问者 胡莱馒头 #2

  另外，我想问的就是，单独弄一个mixin.scss再每个vue文件引入，只在main.js中引入一次global.scss(这里面不引入mixin.scss，因为发现@function全局引入一次没用)，这样会更好吗，还是说没有区别，我的主要矛盾在于，全局已经有reset.css了，每个vue文件再引入是不是会变成index.html其实有很多份reset.css

• Sam 回复 提问者 胡莱馒头 #3

  不会的，scss中的import只是为了获取变量和函数，不会重复拷贝reset.scss这些内容，你打开dist目录下的css文件看一下就知道了，webpack在这方面已经优化得很好了