如何在Bootstrap中无需添加className使用Next.js优化的Google Font？

可以实现无需额外添加组件className，直接让Bootstrap源文件使用Next.js优化后的Google Font，以下是两种可行方案：

方案一：通过SCSS变量覆盖整合（无额外className） #

这种方法通过将Next.js生成的优化字体族注入到Bootstrap的SCSS变量中，编译后全局生效：

1. 在_app.js中加载字体并导出字体族：

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

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

// 导出Next.js优化后的字体族，供SCSS使用
export const openSansFontFamily = openSans.style.fontFamily;

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

2. 在自定义_variables.scss中覆盖Bootstrap变量：

// 导入_app.js中导出的字体族变量（路径根据项目结构调整）
@import '../pages/_app';

// 用Next.js优化后的字体族覆盖Bootstrap的默认变量
$font-family-sans-serif: #{$openSansFontFamily};

// 导入Bootstrap核心样式
@import 'bootstrap/scss/bootstrap';

编译后，Bootstrap的--bs-font-sans-serif变量会自动替换为Next.js生成的带哈希标识的优化字体族，无需任何额外className，全局样式直接生效。

方案二：根元素注入变量类（仅需一次根className） #

如果不想修改SCSS，可以将Next.js生成的变量类加到根元素（html或body），利用CSS变量的继承性覆盖全局的Bootstrap变量：

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

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

function MyApp({ Component, pageProps }) {
  // 将变量类加到根html元素，全局继承该变量值
  return (
    <html className={openSans.variable}>
      <body>
        <Component {...pageProps} />
      </body>
    </html>
  );
}

export default MyApp;

为什么之前的尝试无效？ #

Next.js的variable参数本质是生成一个包含目标变量的CSS类，而非直接修改:root上的变量。之前将类加到main元素上，仅会让main及其子元素继承该变量，无法覆盖Bootstrap全局的:root变量；而加到根元素后，全局所有元素都会继承这个变量值，Bootstrap的样式自然会使用优化后的字体。

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