VueSFCStyleCSS变量注入详解（新版）
CSS变量可以更好的和JavaScript通信，CSS变量是运行时的。通过本文您将认识和理解以下概念：SFCStyle——单文件组件的样式；原生CSS变量——CSS作者定义的标准规范；SFC样式变量提案（旧版本）；SFC风格的CSS变量注入（新版）；使用CSS变量注入和使用原生CSS变量；变量注入背后的原理；CSS变量注入的优点。在SFCStyleVariables提案中引入，VueSFC样式提供了简单的CSS组合和封装，但它是纯静态的——这意味着到目前为止我们还没有能力在运行时根据组件的状态动态更新样式。大多数现代浏览器现在都支持原生CSS变量，我们可以使用它轻松连接组件的状态和样式。SFCStyle简要介绍了Vue单文件组件(SFC)规范介绍，.vue文件是一种自定义文件类型，它使用类似HTML的语法来描述Vue组件。每个.vue文件包含三种类型的顶级语言块、exportdefault{data(){return{color:'red'}}}.text{color:var(--color);}为什么要使用状态驱动的CSS变量因为VueSFC样式提供了简单的CSS搭配和封装，但它是纯静态的——这意味着到目前为止，我们还没有能力在运行时根据组件的状态动态更新样式。大多数现代浏览器现在都支持原生CSS变量，我们可以使用它轻松连接组件的状态和样式。关于提议的设计在这个提议的设计（遗留）中，VueSFCStyle支持vars绑定，它接受作为CSS变量注入的键/值表达式。它在与中的表达式相同的上下文中进行评估。变量将作为内联样式应用于组件的根元素。在上面的示例中，给定一个带有值{color:'red'}的vars绑定，呈现的HTML将是：hello
Inscopedmode当在作用域模式下使用时，您需要确保CSS变量不会泄漏到后代组件中或意外遮蔽DOM树更高层的CSS变量。应用的CSS变量将以组件的作用域ID为前缀：
hello 都被视为局部变量。在这种情况下，要使用全局CSS变量，您需要使用全局：prefix:
h1{color:var(--color);font-size:var(--global:fontSize);旧提议的设计缺陷需要手动声明vars以暴露可以使用的变量。没有明显的视觉提示表明变量被注入和响应。作用域/非作用域模式下的不同行为。在非范围模式下，CSS变量会泄漏到子组件中。在作用域模式下，需要global:前缀才能使用在组件外声明的普通CSS变量。（通常情况下，最好保持组件内外CSS变量的用法一致）新版本提案的改进为了解决以上问题，新版本的改进用法如下：hello <样式>.text{颜色：v-bind（颜色）；/*表达式（用引号引起来）*/font-size:v-bind('font.size');}无需显式声明哪些属性作为CSS变量注入（通过在CSS中使用v-bind()推断）；反应变量的视觉差异更为明显；作用域/非作用域模式下的相同行为；不会泄漏到子组件中；普通CSS变量的使用不受影响。Vue3中实例的使用不做详细介绍，请结合注释了解。示例包括：使用的新脚本设置；原生CSS变量定义和var()的使用；使用v-bind的CSS变量注入。响应式在运行时改变CSS样式；推荐款式。
VueGoldenLayout//脚本设置最终渲染出来的效果和编译好的html和css：注意：vue3中使用了css变量注入，推荐风格是分开单独的CSS样式。变量注入背后的原理我们从上面SFCStyle的简单介绍中了解到，vue-loader会解析.vue文件并提取语言块。如果有必要，它会被其他加载器处理，最后组装成一个ESModule，它默认导出一个Vue.js组件选项的对象。如果通过
