如何指定SCSS局部文件编译位置？解决媒体查询被CSS层叠覆盖问题

核心原因 #

CSS层叠规则是后定义的样式会覆盖先定义的同名选择器样式，你遇到的问题本质是编译后媒体查询代码位于基础类之前，因此被后续的基础类样式覆盖。

可行解决方案 #

1. 将媒体查询嵌套到对应类内部（推荐）

利用SCSS的嵌套特性，把媒体查询直接写在基础类的代码块中，编译后媒体查询代码会自动跟在基础类后面，天然满足层叠顺序要求。

示例：

• 若要保持代码分离，先在_media.scss中定义媒体查询混合宏：

// _media.scss
@mixin mobile {
  @media (max-width: 768px) {
    @content;
  }
}

• 再在main.scss的基础类中调用混合宏：

@import 'media';

.btn {
  padding: 1rem 2rem;
  font-size: 16px;

  @include mobile {
    padding: 0.5rem 1rem;
    font-size: 14px;
  }
}

编译后的CSS会自动保证媒体查询在基础类之后：

.btn {
  padding: 1rem 2rem;
  font-size: 16px;
}
@media (max-width: 768px) {
  .btn {
    padding: 0.5rem 1rem;
    font-size: 14px;
  }
}

2. 调整文件引入顺序（适用于坚持分离媒体查询文件的场景）

如果希望媒体查询代码仍放在独立的_media.scss中，必须确保**_media.scss的引入在所有基础类定义文件之后**。

入口文件_index.scss写法示例：

// 先引入定义基础类的文件
@import 'main';
// 再引入媒体查询文件
@import 'media';

这样编译后的CSS中，基础类代码先输出，媒体查询代码在后，就能正常覆盖基础样式。

为什么之前调整顺序没用？ #

大概率是你之前的引入顺序是先引_media.scss、再引main.scss，导致基础类代码在媒体查询之后输出，反过来覆盖了媒体查询的样式。

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