Problem With PurgeCSS And Sass `@extend` Syntax

Question

I'm working with Sass and PurgeCSS and I had the following case:

@import "bootstrap/scss/bootstrap";
/* purgecss start ignore */
.rte {
  a {
    @extend .text-decoration-underline, .link-offset-3;
  }
  blockquote {
    @extend .blockquote, .ms-4,.mt-5, .fs-4;
  }
}
/* purgecss end ignore */

The problem is that PurgeCSS seems to purge the Bootstrap classes used inside the @extend clause before it comes to the part in the stylesheet where they are used. Is there an elegant way to fix this? One alternative is to let PurgeCSS also scan all SCSS files, which creates a slightly larger bundle, but still good. Any other ideas?

Answer 1

Configure PurgeCSS to Safelist Classes

This can be done by adding these classes to a safelist in your PurgeCSS configuration settings. For example:

// In your PurgeCSS configuration
module.exports = {
  content: ['./src/**/*.html', './src/**/*.js', /* other content files */],
  safelist: [
    'rte'
  ]
}