javascript - SCSS :root 部分与 :export

Question

我有一个test.module.scss文件，其中存储了颜色、排版等的所有变量。我希望能够在react组件中使用它。问题是文件:root在顶部可以定义变量，它看起来像这样：

:root{
  --color-white: #fff;
  --color-black: #000;
  //...rest colors
}

我希望能够在:export这里使用我的反应组件中的这些颜色。如何在此处添加它以免破坏代码？我试过了：

:root{
  :export{
     --color-white: #fff;
     --color-black: #000;
     //...rest colors
  }
}

或者

 :export{
      :root{
         --color-white: #fff;
         --color-black: #000;
         //...rest colors
      }
    }

甚至：

:root:export{
    :root{
       --color-white: #fff;
       --color-black: #000;
       //...rest colors
     }
}

或其他一些情况，:root + :export等等。但没有任何效果按预期工作，变量无法从反应组件访问，或者它们不可导出。它的导出方式是什么？我知道我可以:export在 scss 文件的末尾添加并再次将所有变量放在那里，但它们会加倍，这不是我想要使用的方式。