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

问题描述

我正在使用带有 TypeScript 模板的 create-react-app 并尝试在 style/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;

为了应用这些，我缺少什么？

解决方法

这个语法可以完成工作！

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

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