如何在多CSS文件中让sidebar-custom继承AdminLTE的sidebar-dark/light-primary样式？

纯CSS方案（无需预处理器） #

因为你的独立CSS文件是最后加载的，优先级足够覆盖原有样式，有两种实现方式：

1. 复用AdminLTE的CSS变量

AdminLTE的侧边栏主题类（sidebar-dark-primary/sidebar-light-primary）是通过CSS变量定义核心样式的，直接在sidebar-custom里引用对应变量就能继承主题：

继承sidebar-dark-primary的样式：

.sidebar-custom {
  /* 复用sidebar-dark-primary的主题变量 */
  --sidebar-color: #fff;
  --sidebar-bg: #343a40;
  --sidebar-hover-color: #fff;
  --sidebar-hover-bg: #23272b;
  --sidebar-active-color: #fff;
  --sidebar-active-bg: #007bff;
  
  /* 基础样式 */
  background-color: var(--sidebar-bg);
  color: var(--sidebar-color);
}

/* 子元素样式同步 */
.sidebar-custom .nav-link {
  color: var(--sidebar-color);
}
.sidebar-custom .nav-link:hover,
.sidebar-custom .nav-link.active {
  color: var(--sidebar-hover-color);
  background-color: var(--sidebar-hover-bg);
}
/* 按需添加其他子元素（如菜单标题、下拉框等）的样式 */

继承sidebar-light-primary的样式：

.sidebar-custom {
  /* 复用sidebar-light-primary的主题变量 */
  --sidebar-color: #495057;
  --sidebar-bg: #fff;
  --sidebar-hover-color: #495057;
  --sidebar-hover-bg: #e9ecef;
  --sidebar-active-color: #fff;
  --sidebar-active-bg: #007bff;
  
  /* 基础样式 */
  background-color: var(--sidebar-bg);
  color: var(--sidebar-color);
}

/* 子元素样式同步 */
.sidebar-custom .nav-link {
  color: var(--sidebar-color);
}
.sidebar-custom .nav-link:hover,
.sidebar-custom .nav-link.active {
  color: var(--sidebar-hover-color);
  background-color: var(--sidebar-hover-bg);
}

2. 直接复制对应类的样式

打开AdminLTE的CSS文件，找到.sidebar-dark-primary（或.sidebar-light-primary）及其所有子元素的样式代码，复制到你的独立CSS文件中，将选择器里的sidebar-dark-primary替换为sidebar-custom即可。比如：

/* 复制sidebar-dark-primary的核心样式 */
.sidebar-custom {
  color: #ffffff;
  background-color: #343a40;
}
.sidebar-custom .nav-sidebar>.nav-item>.nav-link.active {
  color: #fff;
  background-color: #007bff;
}
.sidebar-custom .sidebar-footer {
  background-color: #23272b;
  color: #ffffff;
}
/* 其他相关子元素样式按需复制替换 */

Sass/Scss方案（更高效） #

如果你的独立样式文件用Sass编写，可以直接用@extend指令继承AdminLTE的主题类，无需手动复制代码：

继承sidebar-dark-primary：

.sidebar-custom {
  @extend .sidebar-dark-primary;
}

继承sidebar-light-primary：

.sidebar-custom {
  @extend .sidebar-light-primary;
}

注意：要确保你的Sass编译环境能正确引入AdminLTE的Sass源文件，否则@extend无法找到目标类。

内容的提问来源于stack exchange，提问作者Ivan-Mark Debono