使用两个SCSS文件实现div并排与堆叠布局样式不生效如何解决

问题根因 #

你的响应式样式无法生效是因为CSS优先级/样式引入顺序问题：相同权重的类选择器，后加载的样式会覆盖先加载的样式，如果你的page-responsive.scss引入顺序早于page.scss，或者响应式选择器权重低于默认样式，就会被默认样式覆盖。

解决方案（无需使用!important） #

1. 调整样式文件引入顺序 #

这是成本最低的解决方案，确保在项目入口文件中，page-responsive.scss的引入顺序晚于page.scss：

// 示例：React/Vue 入口文件的样式引入顺序
import './page.scss'
// 响应式样式放在默认样式之后引入
import './page-responsive.scss'

相同权重的选择器，后加载的样式优先级更高，会自动覆盖前面的同名规则。

2. 提高响应式样式的选择器权重 #

如果调整引入顺序无法解决，你可以小幅提升响应式选择器的权重，高于默认的.tab-header单类选择器即可：

/* 方案A：叠加标签选择器，权重高于单类名 */
div.tab-header {
  grid-template-columns: 1fr;
}

/* 方案B：叠加外层父元素的类名，权重更高 */
// 假设tab-header外层有类名为.page-wrap的父元素
.page-wrap .tab-header {
  grid-template-columns: 1fr;
}

3. 规范嵌套响应式写法 #

更推荐的写法是直接将响应式规则嵌套在默认样式内，用媒体查询包裹，不需要拆分两个文件也能实现清晰的样式管理：

// page.scss 中直接编写
.tab-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  // 替换为你实际的响应式断点，比如768px
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

这种写法的响应式规则天然和默认规则权重相同，且写在默认规则之后，会自动生效。

额外检查项 #

确认你的page-responsive.scss中的样式规则，确实包裹在正确的媒体查询条件内，避免因为断点写错导致样式不触发。

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