如何在SCSS文件中使用设计库导出的JS样式对象？

当然可以实现，下面是几种实用方案，比单纯转JSON更灵活：

方案1：Node.js脚本生成SCSS变量文件 #

写个简单的Node脚本，读取JS导出的样式对象，直接转换成SCSS变量/映射（map）文件，每次设计库更新时跑一遍脚本就行。

示例代码：
假设设计库导出的designTokens.js是这样：

export const typography = {
  fontFamily: {
    primary: '"Inter", sans-serif',
    secondary: '"Georgia", serif'
  },
  fontWeight: {
    regular: 400,
    bold: 700
  }
};

写个generate-scss-tokens.js脚本：

const fs = require('fs');
const { typography } = require('./designTokens.js');

// 转换为SCSS映射格式
let scssContent = '$typography: (\n';
Object.entries(typography.fontFamily).forEach(([key, value]) => {
  scssContent += `  fontFamily-${key}: ${value},\n`;
});
Object.entries(typography.fontWeight).forEach(([key, value]) => {
  scssContent += `  fontWeight-${key}: ${value},\n`;
});
scssContent += ');\n';

// 写入SCSS文件
fs.writeFileSync('./src/styles/design-tokens.scss', scssContent);

然后在package.json加个脚本：

"scripts": {
  "generate-tokens": "node generate-scss-tokens.js"
}

运行npm run generate-tokens就能生成可用的SCSS映射，之后在SCSS里用map-get($typography, fontFamily-primary)调用。

方案2：CSS Modules + 内联样式（混合场景） #

如果你的项目用CSS Modules，也可以在JS组件里导入设计对象，把样式通过内联或者动态类名的方式应用，同时保留SCSS的其他样式逻辑。比如：

import { typography } from 'design-library';
import styles from './Component.module.scss';

function MyComponent() {
  return (
    <div className={styles.container} style={{ fontFamily: typography.fontFamily.primary }}>
      <h1 style={{ fontWeight: typography.fontWeight.bold }}>Hello</h1>
    </div>
  );
}

这种方式适合需要动态切换样式的场景，不用额外处理SCSS变量。

方案3：PostCSS插件自动转换 #

用postcss-js或者自定义PostCSS插件，在构建阶段把JS对象转换成CSS变量，然后在SCSS里直接引用这些变量。

比如先生成tokens.css：

const { typography } = require('./designTokens.js');
let cssContent = ':root {\n';
Object.entries(typography.fontFamily).forEach(([key, value]) => {
  cssContent += `  --font-family-${key}: ${value};\n`;
});
Object.entries(typography.fontWeight).forEach(([key, value]) => {
  cssContent += `  --font-weight-${key}: ${value};\n`;
});
cssContent += '}\n';
fs.writeFileSync('./src/styles/tokens.css', cssContent);

然后在SCSS里导入这个文件，用var(--font-family-primary)直接引用。

关于你试过的JSON方案补充 #

如果已经转成JSON，也可以用SCSS的json-decode函数（需要Dart Sass 1.33+）直接读取：

$tokens: json-decode(file-get('./design-tokens.json'));
body {
  font-family: map-get($tokens, 'fontFamily', 'primary');
  font-weight: map-get($tokens, 'fontWeight', 'bold');
}

不过这种方式每次编译都会读取文件，性能比预生成SCSS变量稍差，适合小体量的设计token。

内容的提问来源于stack exchange，提问作者shriprada.s