我正在导出 CSS 值变量，为什么没有应用它们？

Question

我正在使用带有TypeScript模板的create-react-app，并尝试在styles/colors.css文件中实现如下颜色变量:

@value MainBlue: #255EDF;
@value MainOrange: #FF6F4A;
@value MainYellow: #FFD640;

当我在CSS模块中导入它们(见下文)时，它们没有实现。

@value MainYellow from '~styles/colors.css';
.homePage {
background-color: MainYellow;
text-align: center;
}

import styles from './homePage.module.css';
const HomePage = () => {
return (
<div className={styles.homePage}>Home</div>
);
};
export default HomePage;

为了使这些应用，我遗漏了什么?

Answer 1

这个语法可以完成这项工作!

:root {
--MainBlue: #255EDF;
--MainOrange: #FF6F4A;
--MainYellow: #FFD640;
}
.homePage {
background-color: var(--MainYellow);
text-align: center;
}

<div class="homePage">Home</div>