在组件内部引用SCSS变量

我试图在组件中引用main.scss文件中的颜色变量，但不确定正确的语法是什么。现在它通过硬编码颜色十六进制值来工作

我可以通过添加外部stylsheet并以这种方式引用主题颜色来实现它，但是我不想创建额外的文件，而是使用内部样式

这里是main.scs：

$theme-colors: (
  'primary': #00a677,
);

以下是组件：

import React from 'react';

const box = {
  color: '#9D2235',
};

const Box = () => {
 return(
  <div style={box}><h1>I'm A Box!</h1></div>
 )
}

export default Box;

---

你知道我该怎么做吗

您可以做的是，在box组件上放置一个类

import React from 'react';

const Box = () => {
 return(
  <div className='box'><h1>I'm A Box!</h1></div>
 )
}

export default Box;

在main.scss中

$primary: #00a677

.box {
   color: $primary
}

在您的组件中

import React from 'react';

const Box = () => {
 return(
  <div className='box'><h1>I'm A Box!</h1></div>
 )
}

export default Box;

---

这是一个选项，但我确实想将主样式与特定于组件的样式区分开来。@EricNguyen您的意思是说您有包含所有样式变量的main.scs，并且您也有单独的用于组件的scs？如果是这种情况，您可以将所有样式变量存储到main.scs，只需将main.scs导入到要使用该变量的组件所使用的其他scs。您可以参考本sass文档