scss 中不能通过:export 导出scss变量

Question

在scss中

/* 改变主题色变量 */
$--color-primary: rgb(83, 7, 7);

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-plus/lib/theme-chalk/fonts';

:export {
    --primaryColor: $--color-primary;
}

在js中

import styles from './var.scss';

console.log(styles) // { --primaryColor: '$--color-primary' }

Answer 1

使用 scss #{} 插值，问题总结如下：

一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下则必须要以 #{$variables} 形式使用。

Answer 2

这问题，我也遇到了，百度了好几天终于有个大神回答的可以。 在文件名 .scss前面加上 .module就好了