PurgeCSS与Sass `@extend`语法兼容问题求助

方案1：手动配置PurgeCSS安全列表（Safelist） #

直接将@extend引用的Bootstrap类添加到PurgeCSS的安全列表中，明确告知PurgeCSS不要删除这些类。配置示例如下：

// postcss.config.js 示例
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: ['./src/**/*.html', './src/**/*.js'], // 原有的扫描文件
      safelist: {
        standard: [
          'text-decoration-underline',
          'link-offset-3',
          'blockquote',
          'ms-4',
          'mt-5',
          'fs-4'
        ]
      }
    })
  ]
}

• 优势：精准控制保留的类，不会额外增加包体积
• 注意：后续若新增@extend的类，需要同步更新安全列表

方案2：用Sass变量集中管理扩展类，让PurgeCSS扫描变量文件 #

将需要@extend的类名存入Sass变量，并在单独文件中添加空选择器让PurgeCSS识别，同时将该文件加入PurgeCSS的扫描范围：

// src/styles/rte-extend-classes.scss
$rte-extend-classes: (
  'text-decoration-underline',
  'link-offset-3',
  'blockquote',
  'ms-4',
  'mt-5',
  'fs-4'
);

// 空选择器让PurgeCSS捕获类名，不会生成冗余样式
/* purgecss start ignore */
@each $class in $rte-extend-classes {
  .#{$class} {}
}
/* purgecss end ignore */

在主样式文件中引用变量并使用@extend：

@import "bootstrap/scss/bootstrap";
@import "./rte-extend-classes";

.rte {
  a {
    @extend text-decoration-underline, link-offset-3;
  }
  blockquote {
    @extend blockquote, ms-4, mt-5, fs-4;
  }
}

最后更新PurgeCSS配置，把rte-extend-classes.scss加入扫描列表：

content: ['./src/**/*.html', './src/**/*.js', './src/styles/rte-extend-classes.scss']

• 优势：无需手动维护安全列表，新增类只需更新变量；空选择器不会增加样式体积

方案3：替换@extend为Bootstrap Sass Mixins #

Bootstrap的大部分工具类和组件都提供了对应的Sass Mixins，直接使用Mixins在目标选择器下生成样式，彻底摆脱对原有类的依赖：

@import "bootstrap/scss/bootstrap";

.rte {
  a {
    @include text-decoration(underline);
    @include link-offset(3);
  }
  blockquote {
    @include blockquote;
    @include margin-start(4);
    @include margin-top(5);
    @include font-size(4);
  }
}

• 优势：样式直接生成在.rte的子选择器下，无冗余代码；完全避免PurgeCSS误删问题
• 注意：部分小众工具类可能没有对应的Mixins，此时可以直接手写等价样式

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