Vue3 项目中 Scss 如何使用 Javascript 变量

在 Vue3 中，可以通过在 Scss 文件中使用函数来使用 Javascript 变量。具体步骤如下：

在项目中安装 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>