如何在React+TS+Vite项目dist目录创建可修改生效的配置文件？

1. 抽离全局CSS变量到独立文件 #

在项目中创建单独的全局变量CSS文件（比如src/styles/globalVariables.css），把所有需要外部修改的变量定义在:root伪类下：

:root {
  --errorColor: #ff4444;
  --borderColor: #e0e0e0;
  /* 按需添加其他全局变量 */
}

2. 配置Vite实现单独打包 #

修改vite.config.ts，通过Rollup配置将这个变量文件单独输出到dist目录，不合并到其他bundle中：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        // 新增全局变量CSS作为独立入口
        globalStyles: './src/styles/globalVariables.css',
      },
      output: {
        assetFileNames: (assetInfo) => {
          // 将目标CSS文件重命名为你想要的globalStyles.css
          if (assetInfo.name === 'globalVariables.css') {
            return 'globalStyles.css';
          }
          // 其他资源保持默认命名规则
          return 'assets/[name]-[hash][extname]';
        },
      },
    },
  },
});

3. 直接在HTML中引入该CSS文件 #

修改项目根目录的index.html，移除入口文件中对该变量CSS的导入，改为直接引入：

<link rel="stylesheet" href="/globalStyles.css" />

这样无论是开发环境还是生产构建后，浏览器都会直接加载这个独立的CSS文件，修改dist目录下的globalStyles.css后，刷新页面即可看到样式变更。

4. TypeScript类型支持（可选） #

如果需要在TS文件中引用这些变量，可以创建类型声明文件src/styles/variables.d.ts：

declare module '*.css' {
  interface GlobalVariables {
    errorColor: string;
    borderColor: string;
    // 对应你定义的所有变量
  }
  const variables: GlobalVariables;
  export default variables;
}

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