如何在React项目的SCSS文件中声明全局根变量供所有组件访问？

问题原因 #

你的app.scss文件未被正确加载到项目中，导致:root里定义的--main-color变量从未注入到DOM全局样式中，因此Home组件的样式无法找到该变量。

解决方案 #

• 在项目入口文件导入app.scss
  找到项目入口文件（通常是src/index.js或src/App.js），添加导入语句：

  import './app.scss';
  

  若app.scss在子目录中，需调整路径（比如import './styles/app.scss';）。

• 避免CSS Modules冲突
  如果项目使用CSS Modules，不要将app.scss命名为app.module.scss——模块化样式会被限定在组件作用域内，无法全局生效。保持文件名为app.scss，确保导入后作为全局样式加载。

• 检查SCSS依赖是否安装
  确认项目已安装处理SCSS的依赖：

  npm install sass --save-dev
  # 或使用yarn
  yarn add sass --dev
  

  缺少这些依赖会导致SCSS无法编译为CSS，进而引发样式不生效问题。

• 验证样式加载状态
  导入后重启项目，打开DevTools的Elements面板，查看<html>标签的样式，确认:root的--main-color变量已存在。若存在，Home组件的背景色即可正常显示。

内容的提问来源于stack exchange，提问作者VISHWAJEET SINGH