如何在拥有大量SCSS局部文件时提升编译速度？

• 启用增量编译
  主流SCSS编译器（如Dart Sass）支持增量编译模式，仅重新编译修改过的文件及其依赖项，而非全量编译。用命令行启动监听模式时添加--watch参数即可自动启用；若用webpack等构建工具，可配合cache-loader或开启webpack's watch mode，缓存已编译结果。

• 优化导入结构
  用@use替代@import（Dart Sass官方推荐），避免重复导入相同模块；抽离高频复用的变量、混合宏到单独基础文件，减少每个局部文件的导入数量；同时梳理依赖关系，杜绝不必要的循环导入和深层嵌套导入。

• 拆分编译任务
  按业务模块拆分SCSS文件，分别编译成独立CSS文件（如组件样式、页面样式、全局样式分开编译），每次仅处理修改的模块，大幅降低整体编译耗时。

• 升级编译器版本
  新版本SCSS编译器通常有性能优化，比如Dart Sass的后续版本在处理大量文件时速度提升显著。建议替换停止维护的Node Sass，使用最新稳定版的Dart Sass。

• 利用编译缓存
  借助构建工具的缓存功能，比如Gulp中用gulp-cache插件，webpack中配置cache: true，让工具缓存已编译的SCSS结果，下次编译直接复用缓存，跳过重复步骤。

• 简化样式逻辑
  减少超过3层的嵌套选择器，避免复杂的混合宏运算；把动态计算逻辑提前转为静态值，降低编译时的计算量。

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