如何将SCSS颜色变量同步至Storybook调色板与UI组件？

核心思路 #

MDX无法直接解析SCSS变量，核心解决方案是将SCSS颜色变量转换为JS可读取的对象，再用这个对象渲染Storybook的调色板组件，实现修改SCSS变量后组件与文档自动同步更新。

步骤1：将SCSS颜色变量导出为JS对象 #

根据你的颜色定义方式，选以下两种可靠实现：

方式A：提取静态SCSS变量（无函数计算场景）

如果你的颜色都是固定值（如$primary: #165DFF;），用简单脚本提取即可：

1. 新建scripts/convert-colors.js：

const fs = require('fs');
const path = require('path');

// 读取SCSS调色板文件
const scssPath = path.resolve(__dirname, '../src/styles/palette.scss');
const scssContent = fs.readFileSync(scssPath, 'utf8');

// 匹配$开头的颜色变量
const colorRegex = /\$([a-zA-Z0-9-]+):\s*([#\w\s]+);/g;
const colors = {};

let match;
while ((match = colorRegex.exec(scssContent)) !== null) {
  const [, name, value] = match;
  colors[name.trim()] = value.trim();
}

// 生成可被MDX导入的JS文件
const jsContent = `export const colors = ${JSON.stringify(colors, null, 2)};\n`;
const jsOutputPath = path.resolve(__dirname, '../src/colors.js');
fs.writeFileSync(jsOutputPath, jsContent);

console.log('Colors converted successfully!');

2. 在package.json添加脚本：

"scripts": {
  "build-colors": "node scripts/convert-colors.js",
  "watch-colors": "nodemon --watch src/styles/palette.scss --exec npm run build-colors"
}

方式B：解析动态SCSS变量（含函数计算场景）

如果颜色用了SCSS函数（如lighten()、darken()），需要用Sass编译器计算实际值：

1. 安装依赖：npm install sass --save-dev
2. 修改scripts/convert-colors.js：

const fs = require('fs');
const path = require('path');
const sass = require('sass');

const scssPath = path.resolve(__dirname, '../src/styles/palette.scss');
// 编译SCSS并提取计算后的变量
const result = sass.renderSync({
  file: scssPath,
  outputStyle: 'expanded',
});

const cssContent = result.css.toString();
const colorRegex = /\$([a-zA-Z0-9-]+):\s*([#\w\s]+);/g;
const colors = {};

let match;
while ((match = colorRegex.exec(cssContent)) !== null) {
  const [, name, value] = match;
  colors[name.trim()] = value.trim();
}

const jsContent = `export const colors = ${JSON.stringify(colors, null, 2)};\n`;
const jsOutputPath = path.resolve(__dirname, '../src/colors.js');
fs.writeFileSync(jsOutputPath, jsContent);

console.log('Colors converted successfully!');

步骤2：配置Storybook自动同步 #

1. 启动监听脚本，实时同步SCSS变量变化：

npm run watch-colors

2. 确保.storybook/main.js包含生成的JS文件（默认已覆盖，无需额外配置）：

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  // 其他配置...
};

步骤3：在MDX中渲染同步调色板 #

针对Storybook 7+版本（用@storybook/blocks组件），在调色板MDX文件（如src/styles/palette.stories.mdx）中：

import { Meta, ColorPalette, Color } from '@storybook/blocks';
import { colors } from '../colors';

<Meta title="Design System/Colors" />

# Color Palette

<ColorPalette>
  {Object.entries(colors).map(([name, value]) => (
    <Color key={name} title={name} color={value} />
  ))}
</ColorPalette>

如果是Storybook 6.x版本，替换导入路径即可：

import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';

额外优化 #

• 全局导入：在.storybook/preview.js中全局注入colors对象，避免每个MDX重复导入：

import { colors } from '../src/colors';

export const globals = {
  colors,
};

之后在MDX中直接用globals.colors即可。

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