全局CSS变量的引入。

如何判断你是高级前端，还是初级前端？这个例子是用CSS创建了一个CSS项目，其中定义了一个CSS变量。在引入该变量后，可以在该文件中更改标题的颜色和字体大小。更改后的效果如下。

为了更改字体的颜色和大小，还需要将定义的CSS变量引入进来。当添加其他路由时，也需要继续引入。虽然这样写没有问题，但是如果路由很多，那么每次都需要引入吗？这相当于重复代码，没有必要。

如果学会了代码组装，那么就会想解决这个问题。这些常量中的变量是否可以避免每次都引入？这样会比较麻烦。这时会思考是否可以将其提取出来，然后在main.js中引入，这样就好了？运行一下，发现报错了，因为找不到这个文件。

那是什么文件找不到？大家可以思考一下。其实在Vite官方网站上有答案。

可以看看预处理CS这部分，有一个选项可以用于给每个样式注入额外的代码。注意注入的不仅仅是变量，还会在打包时重复使用这些样式。在这里可以配置并引入变量。

所有的.vue文件都会引入全局变量，保存后就可以了。注意这里一定要有分号，否则也会报错。

此外，还可以在这里添加自定义的变量。不仅可以导入文件，还可以添加CSS变量。这些变量可以在任何Vue文件中使用。

给大家留一个思考题，为什么在点ts文件中引入全局变量？每个微光文件使用它的变量值为什么不生效？还是因为找不到变量。如果知道答案，可以在评论区留言。