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

Question

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

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

标签： csscreate-react-appcss-variablesreact-typescriptreact-css-modules

Answer 1

这种语法将完成这项工作！

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

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