Vue3项目中使用CSS Modules在scss文件局部引入js变量

在Vue3中，可以使用CSS Modules来实现在scss文件中局部使用js变量。

首先，在vue.config.js中配置CSS Modules：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import '~@/variables.scss';`
      }
    }
  }
}

这里的variables.scss是一个包含变量的scss文件。

然后在组件的style标签中，使用CSS Modules的语法：

<template>
  <div class='wrapper'>
    <p class='text'>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

<style module>
.wrapper {
  background-color: $bg-color;
}
.text {
  color: $text-color;
}
</style>

在这个例子中，$bg-color和$text-color是在variables.scss文件中定义的变量。在style标签中，通过使用module关键字，告诉Vue3将这个样式表视为CSS Modules。这样，变量就可以在scss文件中使用了。