Vue3 项目中引入全局样式，全局样式中有 CSS 变量

CSS 变量是什么？

CSS 变量是 CSS3 中新增的一种功能，用来定义可复用的值。它可以让我们将一些样式值（如颜色、字体大小、间距等）提取出来，赋予一个变量名，以便在多个地方统一使用和维护。
CSS 变量在命名时，要求变量名必须以两个短横线--开头，且只能包含字母、数字、连字符-、下划线_。

:root {
    --primary-color: orange;
    --text-color: #333;
}
.container {
    --primary-bg-color: #f5f5f5;
}

以 Vite 搭建的 Vue3 项目为例

1. 在 src 目录下新建一个文件

   src/styles/vars.css
   

   内容就是：

   :root {
     --primary-color: orange;
     --text-color: #333;
   }
   
   .container {
     --primary-bg-color: #f5f5f5;
   }
   

2. 在入口文件（main.ts 或 main.js）里第一行就引入它：

   // main.ts
   import '@/styles/vars.css'   // 必须放在最前面
   import { createApp } from 'vue'
   import App from './App.vue'
   
   createApp(App).mount('#app')
   

3. 之后任何地方（单文件组件、普通 CSS、JSX、模板行内样式）都能直接用：

   <template>
     <div class="container">
       <h1 style="color: var(--primary-color)">Hello</h1>
     </div>
   </template>
   

注意：使用的时候要使用 **CSS 规范规定的“读取自定义属性（变量）”的语法。
**--primary-color 只是“声明”了一个变量名，浏览器并不会自动把它当成颜色值。
要真正“取值”时，必须显式调用 var() 函数，告诉浏览器：
“请把 --primary-color 的值替换到这里来。”
没有 var()，浏览器会把 --primary-color 当成一个无效的标识符，整条声明就会被忽略。