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} 形式使用。