Sass使用@use多次引入同一文件导致样式重复加载调试卡顿如何解决

@use "src/general" as *; 引入的 general.scss 中混合了会直接输出的全局样式规则（比如你提到的body样式）和仅做声明的可复用代码（变量、mixin、函数、占位选择器），而每个组件的SCSS文件独立编译时，都会把引入模块中的顶级样式规则输出一次，最终导致全局样式被重复打包N次，拖慢开发者工具加载速度。

方案1：拆分样式文件（最优解） #

• 把 general.scss 中所有直接输出的全局规则（body重置、全局通用类、字体引入等）抽离到独立的 global.scss 文件中
• 仅在项目入口文件（如index.scss、App.scss）中导入一次 global.scss，所有组件的SCSS文件不要导入这个文件
• 剩下的变量、mixin、函数、占位选择器等无输出的代码，保留在 general.scss 或者单独的 tools.scss/variables.scss 中，这类文件你在任意组件SCSS中@use多少次都不会生成额外的CSS代码，也不会有重复问题

方案2：增加全局开关控制样式输出（不拆分文件的临时方案） #

如果暂时不想拆分文件，可以给全局规则加加载判断，保证只输出一次：

// 在general.scss的最顶部添加这段逻辑
@if not variable-exists(general-module-loaded) {
  $general-module-loaded: true !global;
  // 把你所有的全局样式规则都放在这个代码块里
  body {
    margin: 0;
    padding: 0;
    // 其他原有的body属性
  }
  // 其余全局规则都放在此代码块内
}

// 下面照常放变量、mixin、函数等声明代码
$primary-color: #1890ff;
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

方案3：排查打包配置 #

如果拆分后仍然存在重复问题，可以检查打包相关配置：

• 确认webpack中sass-loader的implementation配置正确指向dart-sass的sass包，没有残留旧的node-sass配置
• 自定义webpack配置的项目，开发模式下可以开启css-minimizer-webpack-plugin的去重规则，不会影响sourcemap正常使用
• 确认全局样式没有写在带.module.scss后缀的CSS Modules文件中，这类文件的样式会被每个引入的组件单独处理

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