能否在ReactTs中用UUID生成唯一变量并传入Sass用于组件样式？

完全可行，核心思路是在应用构建/启动阶段生成唯一标识符，同时给React组件和Sass样式文件提供这个标识符，确保两者匹配。以下是具体实现步骤：

1. 构建时生成唯一哈希 #

写一个Node脚本，在每次启动或构建项目前生成随机唯一哈希，并写入React和Sass都能读取的文件：

// generate-hash.js
const crypto = require('crypto');
const fs = require('fs');

// 生成8位随机十六进制哈希（长度可调整）
const uniqueHash = crypto.randomBytes(4).toString('hex');

// 生成供ReactTS使用的常量文件
fs.writeFileSync('./src/unique-hash.ts', `export const UNIQUE_HASH = 'unique-${uniqueHash}';`);

// 生成供Sass使用的变量文件
fs.writeFileSync('./src/unique-hash.scss', `$unique-hash: 'unique-${uniqueHash}';`);

修改package.json的启动/构建命令，让脚本先执行：

{
  "scripts": {
    "start": "node generate-hash.js && react-scripts start",
    "build": "node generate-hash.js && react-scripts build"
  }
}

2. React组件中注入唯一类名 #

在组件里导入生成的唯一哈希，追加到className上：

// src/components/Button.tsx
import { UNIQUE_HASH } from '../unique-hash';
import './Button.scss';

const Button = () => {
  return (
    <button className={`base-button ${UNIQUE_HASH}`}>
      点击按钮
    </button>
  );
};

export default Button;

3. Sass中定位特定组件 #

在Sass文件里导入哈希变量，用插值语法生成对应的选择器：

// src/components/Button.scss
@import '../unique-hash';

// 基础按钮样式
.base-button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

// 仅匹配本次运行生成的唯一类名
.#{$unique-hash} {
  background-color: #2563eb;
  color: white;
  transition: background-color 0.2s;

  &:hover {
    background-color: #1d4ed8;
  }
}

为什么这个方案可行？ #

• 每次启动或构建项目时，脚本都会生成全新的唯一哈希，确保类名不会重复
• React和Sass使用的是同一个哈希值，样式选择器和组件类名完全对应
• 纯基于ReactTS和Sass实现，不需要额外依赖

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