How to use css variable on typescript (using :export)

[ShuntaNakajima]

How to use css variable on typescript?
I tried with the code below but it didn't work.

_export.scss

:export {
    text_color: #fff;
}

index.vue

<script lang="ts">
import colors from '@/assets/_export.scss'
console.log(colors) // output of this code is  ':export{text_color:#fff;}'
...
</ script>

I think variable named colors would be an object if it worked fine.
but it is output as a string.
How should I solve it?

[lihanspace]

I use it like this. Maybe you can try it.

Maybe it's because my file name is module. scss.

~/assets/styles/variables.module.scss

$header-top-height: 24px;
$header-height: 80px;
$footer-height: 90px;
$default-bg-color: #ffffff;
$default-color: #3366ff;

:export {
  headerTopHeight: $header-top-height;
  headerHeight: $header-height;
  footerHeight: $footer-height;
  defaultColor: $default-color;
  defaultBgColor: $default-bg-color;
}

~/layouts/default.vue

import variables from '~/assets/styles/variables.module.scss'
console.log(variables)

{
  headerTopHeight: '24px',
  headerHeight: '80px',
  footerHeight: '90px',
  defaultColor: '#3366ff',
  defaultBgColor: '#ffffff'
}

[ShuntaNakajima]

It works for me!
thank you!

[mhornbacher]

Worked for me until today :(