如何将 css 根常量共享到另一个 css 文件？

Question

我试图在我的 Angular 测试项目中一次又一次地使用相同的颜色。所以，我制作了一个constants.css，在其中声明我的根常量，它们目前都是颜色。然而，我一直试图在我的各个组件的 css 文件中使用它们。

我尝试在 html 文件中包含constants.css，但不起作用。我尝试了 @import url("constants.css") 和 @import "constants.css"。

常量.css

:root {
    --primary-color: #2c3e50;
    --secondary-color: #f1c40f;
    --background-color: #ecf0f1;
    --accent-color: #c0392b;
}

导航组件.css

@import url("../../../constants.css");

a.logo {
    color: var(--secondary-color);
}

我希望我的徽标文本是黄色的，但它只是默认的黑色。

Answer 1

您忘记在要使用全局变量的 css 文件中声明变量：

@value --secondary-color from "here should be your address";

a.logo {
    color: var(--secondary-color);
}

让我举个例子：

共享.css：

:root {
    --primary-color: #2c3e50;
    --secondary-color: #f1c40f;
    --background-color: #ecf0f1;
    --accent-color: #c0392b;
}

你应该这样main.css写@value --secondary-color

@value --secondary-color from "./shared.css";

.background {
    background-color: var(--secondary-color);
}

并且不要忘记包含您的css文件：

<link href="shared.css" type="text/css" rel="stylesheet"/>
<link href="main.css" type="text/css" rel="stylesheet"/>

不要忘记样式表声明的顺序确实很重要。