how to use <style vars> ?

[pangao66]

I use the style vars as the document example

export default {
  data () {
    return {
      color: 'red'
    }
  }
}
</script>
<style vars="{ color }">
  .text {
    color: var(--color);
  }
</style>

but it does not work
Uncaught SyntaxError: The requested module '/@modules/vue.js' does not provide an export named 'useCSSVars'

[underfin]

Install vue lasted versions and use vite --force remove old cache.

[pangao66]

I create a new project with npm init vite-app vite-demo
but it still doesn't work
the picture I provide above is the code I write
are there any problem ?
the console error
Uncaught SyntaxError: The requested module '/@modules/vue.js' does not provide an export named 'useCSSVars

[pangao66]

when I use the script setup It works

<script setup>

export const color = 'red';
</script>
<style vars="{ color }" scoped>

  .text {
    color: var(--color);
  }
</style>

use the options api data return it still doesn't work

[yyx990803]

Close via vuejs/core#1658 (pending release)