React中如何根据env文件实现多字体路径动态加载？

方案一：CSS变量 + React全局注入（推荐） #

这个方案无需依赖预处理器，利用原生CSS变量实现动态路径，简单直接：

1. 在项目根目录的.env文件中定义字体基础路径（React环境变量必须以REACT_APP_开头）：

REACT_APP_FONT_BASE_URL=/assets/fonts/

2. 在React根组件（如App.js）中，将环境变量注入全局CSS变量：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 将环境变量赋值给根元素的CSS变量
    document.documentElement.style.setProperty('--font-base-url', process.env.REACT_APP_FONT_BASE_URL);
  }, []);

  return (
    <div className="App">
      {/* 应用内容 */}
    </div>
  );
}

export default App;

3. 修改你的font.css文件，用CSS变量替换硬编码的路径：

@font-face {
  font-family: 'CustomRegular';
  src: url(var(--font-base-url)custom-regular.woff2) format('woff2'),
       url(var(--font-base-url)custom-regular.woff) format('woff');
  font-weight: 400;
}

@font-face {
  font-family: 'CustomBold';
  src: url(var(--font-base-url)custom-bold.woff2) format('woff2'),
       url(var(--font-base-url)custom-bold.woff) format('woff');
  font-weight: 700;
}

方案二：Sass变量结合构建工具注入 #

如果你的项目依赖Sass，可通过构建工具将环境变量注入为Sass全局变量，解决你之前无法在SCSS中访问JS变量的问题：

基于craco的配置（create-react-app项目常用） #

1. 安装依赖：

npm install @craco/craco dotenv --save-dev

2. 在项目根目录创建craco.config.js，配置Sass加载器注入环境变量：

const dotenv = require('dotenv');
dotenv.config();

module.exports = {
  style: {
    sass: {
      loaderOptions: {
        // 将环境变量转为Sass全局变量
        additionalData: `$font-base-url: "${process.env.REACT_APP_FONT_BASE_URL}";`
      }
    }
  }
};

3. 修改package.json的启动/构建命令，替换为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

4. 在font.scss中直接使用Sass变量：

@font-face {
  font-family: 'CustomRegular';
  src: url($font-base-url + 'custom-regular.woff2') format('woff2'),
       url($font-base-url + 'custom-regular.woff') format('woff');
  font-weight: 400;
}

方案三：动态创建Style标签加载字体 #

如果需要更灵活的动态控制（比如根据运行时环境切换路径），可在React组件中动态生成字体加载规则：

import { useEffect } from 'react';

// 单独封装字体加载组件
function DynamicFontLoader() {
  useEffect(() => {
    const fontBaseUrl = process.env.REACT_APP_FONT_BASE_URL;
    const styleEl = document.createElement('style');
    
    // 拼接所有字体的@font-face规则
    styleEl.textContent = `
      @font-face {
        font-family: 'CustomRegular';
        src: url(${fontBaseUrl}custom-regular.woff2) format('woff2'),
             url(${fontBaseUrl}custom-regular.woff) format('woff');
        font-weight: 400;
      }
      @font-face {
        font-family: 'CustomBold';
        src: url(${fontBaseUrl}custom-bold.woff2) format('woff2'),
             url(${fontBaseUrl}custom-bold.woff) format('woff');
        font-weight: 700;
      }
    `;
    
    document.head.appendChild(styleEl);
    
    // 组件卸载时移除style标签
    return () => document.head.removeChild(styleEl);
  }, []);

  return null;
}

export default DynamicFontLoader;

在根组件中引入该组件即可：

import DynamicFontLoader from './DynamicFontLoader';

function App() {
  return (
    <>
      <DynamicFontLoader />
      {/* 应用内容 */}
    </>
  );
}

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