vue项目中，创建了一个公共的scss文件，在这个scss文件里声明了颜色变量，如何只引用一次，实现在每个单独的vue页面里使用这些颜色变量？

在Vue项目中，你可以通过以下步骤来在一个公共的SCSS文件中声明颜色变量，并在各个Vue组件中引用它们：

1. **创建全局变量**:
在`src/assets/styles/variables.scss` 或者其他合适的公共样式目录下，创建一个名为 `variables.scss` 的文件。在这个文件中，声明你的颜色变量，例如：

   // variables.scss
   $primary-color: #007BFF;
   $secondary-color: #6C757D;

2. **使用混合（mixins）**:
如果你想避免在每个组件的样式表中直接导入，可以使用 SCSS 混合功能。创建一个包含变量的混合，然后在需要的地方使用它：

   // _color-variables.scss (假设已引入)
   @mixin color($var) {
     color: $var;
   }

然后在你的组件的`styles.vue`或者单独的`.scss`文件中引用这个混合：

   // styles.vue or your-component.scss
   .your-class {
     @include color($primary-color);
   }

3. **使用`@import`指令**:
在每个需要使用的组件的样式表中，你可以直接`@import`包含变量的文件，让变量生效：

   // single-file component's style
   <style scoped>
     @import "../assets/styles/variables";
     .your-class {
       color: $primary-color;
     }
   </style>

使用`scoped`属性确保CSS仅应用于当前组件。

4. **利用预处理器插件**:
Vue CLI 提供了一些如 `vue-cli-plugin-vuetify` 的插件，它们有自己的主题系统，允许你在全局设置颜色变量并引用到所有组件。如果没有使用这样的插件，可以考虑安装像 `sass-resources-loader` 这样的工具，将全局的SCSS文件链接到Vue项目的各个部分。