SCSS 无法直接编译出独立移动端 CSS 文件，因其仅作语法转换，@media 规则原样保留；必须借助 Webpack + PostCSS 等构建工具提取媒体查询生成物理分离文件。
不能靠 SCSS 编译出“独立的移动端 CSS 文件”——SCSS 本身不拆分输出，必须配合构建工具或手动组织媒体查询逻辑。
为什么直接用 @media (max-width: 768px) 无法生成单独文件
SCSS 是预处理器，编译后仍是一份 CSS，@media 规则会被原样保留进最终 CSS。浏览器加载时才按条件应用，不会自动分离成 mobile.css 和 desktop.css。想物理隔离，得靠外部手段。
用构建工具（如 Webpack + postcss）按媒体查询提取 CSS
这是目前最可靠、可落地的方式：
- 安装
postcss+postcss-media-minmax+postcss-extract-media-query（或类似插件） - 在
postcss.config.js中配置：对@media (max-width: 768px)或自定义断点标识（如@media screen and (mobile)）做匹配提取 - 需提前约定“移动端专属”媒体查询写法，例如统一用
@media (width （借助 <code>postcss-media-minmax支持表达式），避免混用max-width和min-width导致提取错乱 - 注意：提取后，原 CSS 中该媒体查询会消失，务必确认基础样式（无媒体查询部分）仍保留，否则移动端无默认样式
用 SCSS $breakpoints + @mixin 预留“可提取标记”
不依赖插件也能提高提取成功率，关键是在 SCSS 层做好语义隔离：
立即学习“前端免费学习笔记（深入）”；
- 定义断点 map 时，为移动端专用断点加前缀，例如：
$mobile-breakpoints: ("sm": 576px, "md": 768px)，而非混在全局$breakpoints里 - 封装一个仅用于移动端提取的 mixin：
@mixin mobile-only { @media (max-width: map-get($mobile-breakpoints, "md")) { @content; } } - 所有只应在移动端生效的样式，必须显式包裹在
@include mobile-only { ... }内，不写在默认层，也不混入桌面断点逻辑 - 这样后续用正则或插件扫描
@media \(max-width:就更可控，减少误提
手动拆分：把移动端样式集中到单独 SCSS 文件再编译
适合小项目或 CI/CD 流程不可控的场景：
- 新建
_mobile-only.scss，里面只放@import语句，导入所有含@include mobile-only的模块（如components/_button.scss、layout/_header.scss） - 确保这些模块内部不包含任何全局样式或重置规则，只输出被
mobile-only包裹的部分 - 用 Sass 单独编译：
sass mobile.scss mobile.css，得到纯移动端 CSS - 风险点：容易漏掉某处未走
mobile-only路径的响应式代码；若组件同时依赖桌面和移动端逻辑，这种拆分会导致重复或缺失
真正难的不是“怎么打包”，而是保持语义一致性：一旦决定用某套断点名（如 "sm"）代表移动端临界值，就必须贯穿 SCSS 变量、mixin 调用、构建提取规则三者，差一个地方拼写或单位不一致（比如 768 漏了 px），整个提取链就断了。
