我想加载谷歌字体如下所述：https://nextjs.org/docs/basic-features/font-optimization
如果我按照文档并像这样加载，一切都很好：

import { Open_Sans } from '@next/font/google';

const openSans = Open_Sans ({
    subsets: ['latin']
})

function MyApp({ Component, pageProps }) {
    return (
        <main className={openSans.className}>
            <Component {...pageProps} />
        </main>
    )
}

export default MyApp

这个版本正在加载字体并生成一个类名，类似于这样：

.__className_d8c39e {
    font-family: '__Open_Sans_d8c39e', '__Open_Sans_Fallback_d8c39e';
    font-style: normal;
}

但是，如果可能的话，我想使用Bootstrap CSS变量，正如我在自定义_variables.scss中使用$font-family-sans-serif: "Open Sans";定义的那样，因此Bootstrap将在前端呈现:root{--bs-font-sans-serif: "Open Sans";}。
我也知道我可以在next中使用变量，比如：

const openSans = Open_Sans ({
    subsets: ['latin'],
    variable: '--bs-font-sans-serif'
})

function MyApp({ Component, pageProps }) {
    return (
        <main className={openSans.variable}>
            <Component {...pageProps} />
        </main>
    )
}

但这只会用给定的变量名创建另一个类名：

.__variable_d8c39e {
    --bs-font-sans-serif: '__Open_Sans_d8c39e', '__Open_Sans_Fallback_d8c39e';
}

我不能不添加className，但仍然在Bootstrap源文件中使用优化的google字体吗？