React项目：如何在App.scss中调用Navbar.scss的类实现昼夜主题切换？

错误原因分析 #

1. 你定义的mixin名称是nav，但调用时写的是Navi.site-nav，名称不匹配直接导致语法错误。
2. 即使修正名称，mixin里的.site-nav选择器也不会自动嵌套到body.dark下，因为没有使用SCSS的父选择器&来关联上下文。

方案一：修正Mixin写法与调用（适合样式复用场景） #

如果需要在多个地方复用导航栏的主题样式，可以按以下方式调整：

1. 修改_Navbar.scss中的Mixin，用&关联父选择器：

@mixin nav-dark-theme {
  & .site-nav {
    // 深色主题下导航栏的样式
    color: #fff;
    background-color: #1c221f;
    // 其他需要修改的文本/布局样式
  }
}

@mixin nav-light-theme {
  & .site-nav {
    // 浅色主题下导航栏的样式
    color: #333;
    background-color: #fff;
  }
}

2. 在App.scss中正确调用Mixin：

@use './Navbar/_Navbar.scss' as Navi;

body.dark {
  color: #a58c6f;
  background-color: #1c221f;
  @include Navi.nav-dark-theme;
}

body.light {
  color: #333;
  background-color: #fff;
  @include Navi.nav-light-theme;
}

方案二：直接使用后代选择器（最简单，无需修改Navbar.scss） #

如果你的Navbar.jsx已经导入了Navbar.scss（即导航栏样式已全局加载），直接在App.scss中通过后代选择器控制导航栏样式即可：

body.dark {
  color: #a58c6f;
  background-color: #1c221f;

  // 深色主题下导航栏样式
  .site-nav {
    color: #fff;
    // 其他需要调整的文本样式
  }
}

body.light {
  color: #333;
  background-color: #fff;

  // 浅色主题下导航栏样式
  .site-nav {
    color: #333;
  }
}

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