如何访问不同文件中的css变量？

Question

我创建了一个 global.css 文件，并在 :root 元素中声明了 css 变量。现在我想模块化地设计我的页面样式，为此，我需要从 global.css 文件访问 (--primary-color: #000) 等变量，但它不起作用。

我尝试在新的 css 模块之上使用 @import '../styles/global.css'，然后使用 var(--primary-color) 但该变量尚无法访问。

是否可以在另一个css文件中使用css变量或者只有Sass可以解决这个问题？

Answer 1

如果有人遇到同样的问题，我发现在使用 CSS 模块时，任何以 .module.css 结尾的 CSS 文件都被视为 CSS 模块文件。导入这样的文件将返回相应的模块对象。

所以我只需添加 .module.css 到 css 文件名的末尾即可解决问题。

Answer 2

您好，我遇到了同样的问题，但您的解决方案对我来说不起作用。 我尝试使用“style.css”中定义的变量并将该文件导入到“theme.css”。 问题是该变量尚不可访问。不和谐的背景上没有出现任何图像。

样式.css

:root {
    --customImg: "https://initiate.alphacoders.com/images/133/stretched-1920-1080-1330237.png?7641";
}

主题.css

@import './style.css';

:root {
   /* Background image variable */
   --background-image: var(--customImg);
 }