如何使用SASS变量覆盖Bootstrap 5导航栏字体族？

问题根源分析 #

1. Webpack未处理字体文件：配置中缺少字体资源打包规则，导致@font-face引用的字体无法输出到dist目录，浏览器加载不到自定义字体。
2. SCSS代码存在冗余错误：重复赋值变量属于无效代码，且@font-face的format参数值错误（应为'truetype'而非'ttf'）。
3. 变量覆盖逻辑需明确：需确保Bootstrap 5导航栏相关变量的覆盖优先级正确。

解决方案步骤 #

1. 更新Webpack配置，添加字体文件处理规则

在module.rules中新增字体资源处理规则，让Webpack能正确打包TTF等字体文件：

'use strict'

const path = require('path')
const autoprefixer = require('autoprefixer')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require("webpack");

module.exports = {
  mode: 'development',
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: false
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [autoprefixer]
              }
            }
          },
          { loader: 'sass-loader' }
        ]
      },
      // 新增字体文件处理规则
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]'
        }
      }
    ]
  }
}

2. 修正custom.scss代码

去掉冗余变量赋值，修正@font-face参数，确保变量正确覆盖Bootstrap默认值：

$primary: #FFBE0B;
$secondary: #FB5607;
$success: #3A86FF;
$info: #FF006E;
$light: #8338EC;

// 修正format参数为'truetype'，确保字体加载正常
@font-face {
    font-family: 'Inter-Bold';
    src: url('../fonts/inter/Inter-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

// 覆盖Bootstrap导航栏字体相关变量
$navbar-font-family: 'Inter-Bold', sans-serif; // 统一导航栏整体字体
$navbar-link-font-size: 16px;
$navbar-link-font-weight: 500;
$navbar-link-color: #333;
$navbar-brand-font-size: 1.5rem;

// 若需全局字体同步，保留此变量
$font-family-base: $navbar-font-family;

3. 验证生效

• 确认字体文件路径与项目实际结构匹配（如src/fonts/inter/Inter-Bold.ttf）
• 重启Webpack dev server，查看dist/fonts目录是否生成字体文件
• 检查浏览器控制台无字体加载错误后，导航栏字体应已生效

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