如何在不同CSS文件中访问:root中定义的CSS变量？

纯CSS完全可以跨文件使用CSS变量，不需要依赖Sass。你遇到的问题是CSS模块的局部作用域特性导致的，下面是具体的问题分析和解决方案：

问题根源 #

CSS模块默认是局部作用域，你在模块内@import的global.css会被局限在当前模块的作用域中，而非全局的:root（即<html>元素），因此页面元素无法读取到这些变量。

正确实现方式 #

方式一：全局引入global.css #

直接在入口HTML文件中用<link>标签引入global.css，将其作为全局样式文件。这样:root里的变量会挂载到全局的<html>元素上，所有CSS文件（包括CSS模块）都能直接通过var(--primary-color)访问变量，无需在模块内重复导入。

示例代码：

<!-- index.html -->
<link rel="stylesheet" href="/styles/global.css">

/* 任意CSS模块文件 */
.button {
  background-color: var(--primary-color);
}

方式二：在CSS模块中强制全局导入 #

如果你的构建工具（如Webpack）支持，可以用:global关键字包裹导入语句，将global.css的内容提升到全局作用域：

/* 某CSS模块文件 */
:global {
  @import '../styles/global.css';
}

.card {
  border-color: var(--primary-color);
}

额外检查点 #

• 确认global.css的路径正确，避免因路径错误导致样式未加载。
• 确保:root的变量声明语法无误：

/* global.css */
:root {
  --primary-color: #000;
}

内容的提问来源于stack exchange，提问作者J-mj