如何使用@use导入SCSS媒体查询文件并实现后置加载（不新增文件）

不需要新增文件，只需要调整媒体查询文件的结构，配合@use的模块调用特性就能实现需求，具体步骤如下：

方法1：用混合宏（Mixin）封装媒体查询 #

1. 修改媒体查询文件（比如_media-queries.scss），把所有媒体查询逻辑包裹在一个mixin中：

// _media-queries.scss
@mixin media-rules {
  @media (min-width: 768px) {
    .container {
      width: 90%;
      padding: 0 1rem;
    }
  }

  @media (min-width: 1200px) {
    .container {
      width: 80%;
      max-width: 1200px;
    }
  }
  // 其他媒体查询规则...
}

2. 在main.scss中使用@use导入模块，并在初始样式后调用mixin：

// main.scss
// 开头用@use导入媒体查询模块，符合语法规则
@use './media-queries' as mq;

// 你的初始全局样式
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: sans-serif;
}
.container {
  width: 100%;
  padding: 0 0.5rem;
}

// 在初始样式之后调用mixin，媒体查询代码会输出在这里
@include mq.media-rules;

方法2：用占位符（Placeholder）封装（适合固定规则） #

如果媒体查询是针对固定选择器的样式，可以用占位符封装：

1. 修改媒体查询文件：

// _media-queries.scss
%tablet-styles {
  @media (min-width: 768px) {
    .container {
      width: 90%;
      padding: 0 1rem;
    }
  }
}

%desktop-styles {
  @media (min-width: 1200px) {
    .container {
      width: 80%;
      max-width: 1200px;
    }
  }
}

2. 在main.scss中导入并扩展占位符：

// main.scss
@use './media-queries' as mq;

// 初始样式
.container {
  width: 100%;
  padding: 0 0.5rem;
}

// 扩展占位符，媒体查询代码会输出在初始样式后
@extend %mq.tablet-styles;
@extend %mq.desktop-styles;

核心原理 #

@use的规则是模块导入必须在所有其他规则之前，但导入模块后，你可以在文件任意位置调用模块内的成员（mixin、占位符、变量等）。通过把媒体查询封装成模块成员，既能遵守@use的语法要求，又能让媒体查询的实际代码输出在初始样式之后，完美替代废弃的@import写法。

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