css怎么写vue定义的变量

在 Vue 中，你可以使用 CSS Modules 或者 SCSS/Sass 来引用 Vue 定义的变量。CSS Modules 是一种 CSS 的预处理器特性，它允许你在 CSS 文件中使用本地作用域的变量，而不会污染全局样式。

1. 使用 CSS Modules (推荐):
- 首先，在你的 Vue 组件文件 `.vue` 中，通常在 `<style lang="css">` 标签内启用 CSS Modules:

     <template>
       <!-- ... -->
     </template>

     <script>
       export default {
         // ...
       }
     </script>

     <style scoped lang="css">
       :root {
         /* 在这里定义 Vue 变量 */
         $primary-color: #007BFF;
       }

       .my-component {
         color: var(--primary-color);
       }
     </style>

- 在 CSS 中通过 `--primary-color` 这样的形式引用变量。

2. 使用 SCSS 或 Sass:
- 需要在项目配置中设置 CSS 模块化支持（如 vue-cli 或其他构建工具插件），然后在 SCSS 文件中定义变量：

     $primary-color: #007BFF;

     .my-component {
       color: $primary-color;
     }

- 如果使用的是 Vue CLI，可以安装 `sass-resources-loader` 和相应的插件配置来进行变量管理。

注意：Vue.js 自身并不直接提供 CSS 变量功能，但配合上述 CSS Modules 或 CSS预处理器，你可以轻松地在 Vue 环境下管理变量。