vue3项目如何在scss里面使用js的变量

在Vue3中，可以通过在scss里面使用函数来使用js的变量。具体步骤如下：

在项目中安装sass-loader和sass依赖。
在vue.config.js中进行配置，将sass-loader的options设置为一个函数，并在函数中定义一个全局变量$color。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/styles/variables.scss";
          $color: #f00;
        `
      }
    }
  }
}

在variables.scss中定义一个函数color()，用于返回$color的值。

@function color() {
  @return $color;
}

.test {
  color: color();
}

在组件中引入variables.scss，即可使用color()函数获取$color的值。

<template>
  <div class="test">
    Hello World!
  </div>
</template>

<style lang="scss">
  @import "@/styles/variables.scss";

  .test {
    color: color();
  }
</style>