Extending a Boostrap class in Next.Js module

I am using Next.js and Bootstrap scss. I am importing Bootstrap Scss in the _app.tsx file.

I would like to make a minor change to a bootstrap class inside of a module without rewriting the entire class. For example, I want to center the text inside of a card footer, but just change the text-align property and keep all the other standard properties.

Since I am unable to use @use to import the bootstrap scss file inside of the module scss file, I cannot use @extend. That forces me to create an entirely new class.

I can import a component.module.scss file as styles add an additional class to the standard bootstrap class, but I was hoping there was a cleaner method.

         import styles from "../styles/component.module.scss";
         ...
         <div className="col">
          <div className="card h-100">
          <div className={'card-header ' + styles.cardHeader}>text1</div>
            <div className="card-body">
              <h5 className={"card-title " + styles.cardTitle}>text2</h5>
              <p className="card-text">text3</p>
            </div>
            <div className={"card-footer " + styles.cardFooter}>
              <small className="text-muted">Last updated 3 mins ago</small>
            </div>
          </div>
        </div>
        <div className="col">
          <div className="card h-100">
          <div className={'card-header ' + styles.cardHeader}>text4</div>
            <div className="card-body">
              <h5 className={"card-title " + styles.cardTitle}>text5</h5>
              <p className="card-text">text6                 </p>
            </div>
            <div className={"card-footer " + styles.cardFooter}>
              <small className="text-muted">Last updated 3 mins ago</small>
            </div>
          </div>

component.module.scss would contain:

        .cardFooter {
          text-align: center;
         }
         .cardHeader {
          background: $blue-100;
          color: $blue-800;
          text-align: center;
          font-size: 1.5rem;
          font-weight: 600;
        }
         
         .cardTitle {
          font-size: .75rem;
          text-transform: uppercase;
        }

This question was answered previously, but does not have an answer: Is it possible to extend a global third party class into a CSS module in Next.js?