React 和 SCSS 从 scss 导出一个变量来反应 [英] React and SCSS export a variable from scss to react

问题描述

我正在尝试将颜色从我的 .scss 文件导出到我的 React.

i am trying to export a color from my .scss file to my React.

颜色.scss

:root {
  --color2: #606060;
}

$color: #88b5dd;
$color2: var(--color2);

.export {
 color: $color
 color2: $color2
}

并在我的 React 中阅读它:

and reading it in my React:

App.js

import {Colors} from './colors.scss'
console.log(Colors.color)
console.log(Colors.color2)

在console.log中我可以看到:

and in the console.log i can see:

#88b5dd
var(--color2)

color2 不是颜色，当我使用 export 时，var(--color2) 不会被插值有谁知道如何解决这个问题?我怎样才能获得在 :root 中定义的颜色?谢谢！

color2 is not a color, the var(--color2) doesn't get interpolated when im using export anyone knows how to fix this issue ? how can i get the color defined in :root? thanks!

推荐答案

找到这个库 react-css-vars并重构此代码以将其与 React 一起使用

found this library react-css-vars and refactor this code to use it with React

这篇关于React 和 SCSS 从 scss 导出一个变量来反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！