开发/生产环境字体url路径不一致（Vite/Sass）

问题根源 #

生产环境中Sass编译后，url("@fa6path")里的别名未被Vite解析——因为Sass先将变量编译为带引号的字符串，Vite无法识别字符串内部的别名标识，最终路径被转义为url(%22@fa6path%22)。

解决方案 #

方案1：通过Vite注入环境专属Sass变量（推荐） #

直接在Vite配置中根据环境动态注入$fa-font-path变量，让Vite全程处理路径解析，避免在Sass文件中写死别名：

1. 修改vite.config.mjs：

import path from 'path';
import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  const isProduction = mode === 'production';

  return {
    resolve: {
      alias: {
        '@frontend': path.resolve(__dirname, 'frontend'),
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          // 注入全局Sass变量，优先级高于本地定义
          additionalData: `$fa-font-path: "${isProduction ? '/assets/font-awesome-6' : '@frontend/assets/font-awesome-6-fonts'}";`,
        },
      },
    },
    build: {
      // 确保打包后字体文件输出到对应目录（默认assetsDir为assets，可按需调整）
      assetsDir: 'assets',
    },
  };
});

2. 注释掉frontend/styles/font-awesome-6/variables.scss中自定义的$fa-font-path：

// 静态方式，开发环境可用
// $fa-font-path: "../assets/font-awesome-6-fonts" !default;

// Vite别名方式，开发环境也可用
// $fa-font-path: url("@fa6path") !default;

方案2：修正Sass变量定义方式 #

如果必须在Sass文件中定义变量，需去掉url()包裹，让Vite能识别别名：

1. 修改variables.scss中的变量：

$fa-font-path: "@fa6path" !default;

（Font Awesome官方样式会自动在使用时添加url(#{$fa-font-path}/xxx)，无需手动包裹url()）

2. 保持vite.config.mjs的别名配置不变，确保生产环境路径对应打包后的输出位置：

resolve: {
  alias: {
    '@fa6path': process.env.NODE_ENV === 'production' 
      ? '/assets/font-awesome-6' 
      : path.resolve('frontend/assets/font-awesome-6-fonts'),
  }
}

验证步骤 #

1. 执行生产打包：npm run build
2. 检查dist/assets/font-awesome-6下是否存在字体文件
3. 查看打包后的CSS文件，确认字体路径已替换为正确的生产环境路径（如/assets/font-awesome-6/fa-solid-900.woff2）

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