如何使用Sass避免CSS代码重复 单模板输出独立CSS文件场景

针对你当前跨独立编译单元的Sass代码重复问题，可根据你的项目构建流程选择以下任意一种落地性强的方案：

方案1：公共组件单独编译抽离（改动最小，适配现有逻辑） #

不需要修改原有组件的mixin逻辑，仅调整编译配置即可：

• 新增一个独立的公共组件编译入口 components.scss，内部设置全局变量 $build-component-context: true，然后引入所有公共组件的mixin并执行一次
• 原有组件的mixin判断逻辑调整为：

@mixin component_1 {
  // 只有在公共组件编译上下文，且组件未被引入过才输出代码
  @if $build-component-context == true and $component_1 == false {
    // 原有组件代码
    $component_1: true !global;
  }
}

• 模板单独编译时，全局配置 $build-component-context: false，此时模板引入的mixin不会输出任何组件代码
• 页面引入资源时，先引入编译好的公共组件CSS，再引入当前页需要的模板CSS即可，公共组件代码全局仅保留一份

方案2：构建工具自动抽离公共代码 #

如果你的项目使用vite、webpack、rollup等现代构建工具，直接用内置的CSS代码分割能力即可自动处理重复：

• 配置构建工具的splitChunks（webpack）或cssCodeSplit（vite）规则，将所有模板中引用次数超过2次的CSS规则自动抽离到全局公共CSS文件中
• 构建工具会自动处理每个模板CSS的依赖关系，重复的组件代码只会在公共文件中出现一次，不需要改动任何现有Sass代码

方案3：后处理阶段全局去重 #

如果不想调整编译流程和Sass代码，可以在CSS编译完成后加入后处理步骤：

• 安装postcss及postcss-discard-duplicates插件，配置到你的构建流程的postcss插件队列末尾
• 插件会自动识别并删除所有编译产物中的重复CSS规则，即使多个模板CSS中都包含同一个组件的代码，最终输出到页面的合并CSS中只会保留一份
• 该方案适合构建流程改造空间小的项目，无需调整业务代码，仅需新增后处理配置

方案4：用Sass原生模块系统优化本地编译逻辑 #

如果后续要优化本地开发的编译效率，可将原有@import导入逻辑替换为Sass官方推荐的@use模块系统：

• @use导入的模块全局只会加载一次，模块内的私有变量天然具备全局唯一状态，不需要你手动在_variable.scss中声明标记变量
• 每个组件模块的私有标记变量用$-前缀声明，仅在模块内可访问，避免变量污染：

// _component1.scss
$-component-1-imported: false !default;
@mixin component_1 {
  @if not $-component-1-imported {
    // 组件代码
    $-component-1-imported: true !global;
  }
}

• 该方案仅解决单次编译上下文内的重复问题，跨独立编译单元的重复还需要搭配前三种方案使用

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