html - 如何从另一个 css 文件导入 css 根常量

Question

我有两个 css 文件 constants.css 和 ma​​in.css

在我的 constants.css 文件 root: { --primaryColor: red; }

在我的 ma​​in.css 文件 .example { background-color: var(primaryColor); }

预期行为是 红色 作为 .示例类，但它不起作用。

我尝试了 @include 'constants.css' 和 @include url('constants.css')，但没有帮助。

所以我的问题是如何从另一个 css 文件中包含根常量？

Answer 1

在你的 constants.css 中定义你的 css 变量

:root {
  --green: #119955;
}

然后在您的 main.css 文件中使用 @import './constants.css; 导入它。并使用你的变量

@import './constants.css';

body {
  background-color: var(--green);
}