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

【问题标题】：How to share a css root constant to another css file?如何将 css 根常量共享到另一个 css 文件？
【发布时间】：2019-07-30 18:31:41
【问题描述】：

我试图在我的 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;
}

nav.component.css

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

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

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

【问题讨论】：

标签： css angular

【解决方案1】：

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

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

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

让我举个例子：

shared.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"/>

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

【讨论】：

【解决方案2】：

我的问题是导入根本不起作用，因为它是 Angular 的东西。我必须将我的常量导入到主 style.css 中，并且在单个 css 文件中导入根本不起作用。

这个链接的正确答案就是答案。

【讨论】：