在另一个样式表中导入样式表

Question

我有 2 个 CSS 文件，需要将其合并为 1 个 CSS 文件。 通常这适用于

@import

。 在其中一个文件的顶部使用 @import 并完成。

但我认为这个案例比较特殊。第一个 CSS 部分（:root 部分）每次都会动态生成不同的颜色。因此我希望将两个 css 文件合并为 1 个文件，然后再将其提供给 html。

注意：

我无法编辑 html 或任何 JavaScript。我只能操作 css-stylesheet。

问题

是否可以让第一个 css 部分以任何形状或形式工作，而无需将 2 个样式表缝合在一起形成 1 个大 css 文件？如果可能的话，出于可读性、维护和其他原因，我想避免这种情况。

虚拟数据 虚拟数据可以解释问题。 IRL 文件 2 超过 5K 行代码。这将来可能会被拆分。

所以在第一个CSS（这也是我想使用的CSS）中我声明了以下内容：

:root {
--var1: #7B82CE;
--var2: #000000;
--var3: #FFFFFF;
}

@import url('https://link.com/css.css');

在

https://link.com/css.css

这个文件看起来像这样。

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

text {
  background-color:(var(--var2));
}

button {
  background-color:(var(--var3));
}

Answer 1

这是

@import

命令的顺序，它在 css 文件中的任何其他行之前播放

@import 应放在 css 文档的 topn 以避免混淆 https://www.w3schools.com/cssref/pr_import_rule.php

在使用变量的文件开头解决与其他文件相反的问题

@import url('https://link.com/variables.css');

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

text {
  background-color:(var(--var2));
}

button {
  background-color:(var(--var3));
}