Stylex变量使用报错：Next.js项目defineVars配置失效问题

正在为Next.js调研应用构建Stylex设计系统，想用stylex.defineVars创建全局变量实现一处修改全局生效，但使用变量时报错，普通常量也无法正常工作，按文档配置babelrc.js后问题仍存在。

相关代码 #

babelrc.js #

module.exports = {
  presets: ["next/babel"],
  plugins: [
    [
      "@stylexjs/babel-plugin",
      {
        dev: false,
        stylexSheetName: "<>",
        genConditionalClasses: true,
        runtimeInjection: true,
        useRemForFontSize: true,
        genConditionalClasses: true,
        unstable_moduleResolution: {
          type: 'haste',
          themeFileExtension: string,
        },
      },
    ],
  ],
};

ButtonStyles.tsx #

import * as stylex from '@stylexjs/stylex';
import { accent, background, colors, primaryText } from './Variables';

export const colors = stylex.defineVars({
  primaryText:  'black' ,
  secondaryText:  '#333' ,
  accent:  'orange' ,
  background:   'white' ,
  lineColor: 'gray' ,
});

export const ButtonStyles = stylex.create({
  big: {
    fontSize: 24,
    padding: '15px 30px',
    margin: '0.3em'
  },
  med: {
    fontSize: 18,
    padding: '10px 20px',
    margin: '0.2em'
  },
  small: {
    fontSize: 14,
    padding: '5px 10px',
    margin: '0.1em'
  },
  primary: {
    // backgroundColor: colors.accent,
    // color:  colors.primaryText,
    borderRadius: 4,
    border: 'none',
    cursor: 'pointer',
    transition: 'background-color 0.3s',
    ':hover': {
      // backgroundColor:colors.accent,
    },
  },
  secondary: {
    backgroundColor: 'transparent',
    // color:colors.primaryText,
    border: `2px solid $background}`,
    borderRadius: 4,
    cursor: 'pointer',
    transition: 'color 0.3s, border-color 0.3s',
    ':hover': {
      color: 'white',
      // backgroundColor: colors.background,
    },
  },
  disabled: {
    opacity: 0.5,
    cursor: 'not-allowed',
  },
});

报错信息 #

⨯ ./styles/ButtonStyles.tsx
Error: C:\Users\ondra\OneDrive - Gymnázium Opatov, Praha 4, Konstantinova 1500\Plocha\surveyapp\my-stylex-app\styles\ButtonStyles.tsx: Only static values are allowed inside of a stylex.create() call.
    at transformFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)
Import trace for requested module:
./styles/ButtonStyles.tsx
./app/page.tsx

问题排查与解决步骤 #

1. 修复Babel配置错误 #

你的babelrc.js存在两处问题：

• 重复配置了genConditionalClasses，删除其中一个
• themeFileExtension: string是语法错误，需改为具体扩展名（如'ts'/'tsx'），或直接移除该配置

修正后的babelrc.js：

module.exports = {
  presets: ["next/babel"],
  plugins: [
    [
      "@stylexjs/babel-plugin",
      {
        dev: false,
        stylexSheetName: "<>",
        genConditionalClasses: true,
        runtimeInjection: true,
        useRemForFontSize: true,
        unstable_moduleResolution: {
          type: 'haste',
          themeFileExtension: 'ts',
        },
      },
    ],
  ],
};

2. 解决变量命名冲突 #

你在ButtonStyles.tsx中同时导入了./Variables的colors，又自行定义了同名变量，导致Stylex无法正确识别全局变量。

修正方案：

• 将全局变量单独放在Variables.ts文件中：

import * as stylex from '@stylexjs/stylex';

export const colors = stylex.defineVars({
  primaryText:  'black' ,
  secondaryText:  '#333' ,
  accent:  'orange' ,
  background:   'white' ,
  lineColor: 'gray' ,
});

• 在ButtonStyles.tsx中仅导入该变量，不再重复定义：

import * as stylex from '@stylexjs/stylex';
import { colors } from './Variables';

export const ButtonStyles = stylex.create({
  big: {
    fontSize: 24,
    padding: '15px 30px',
    margin: '0.3em'
  },
  med: {
    fontSize: 18,
    padding: '10px 20px',
    margin: '0.2em'
  },
  small: {
    fontSize: 14,
    padding: '5px 10px',
    margin: '0.1em'
  },
  primary: {
    backgroundColor: colors.accent,
    color: colors.primaryText,
    borderRadius: 4,
    border: 'none',
    cursor: 'pointer',
    transition: 'background-color 0.3s',
    ':hover': {
      backgroundColor: colors.accent,
    },
  },
  secondary: {
    backgroundColor: 'transparent',
    color: colors.primaryText,
    border: `2px solid ${colors.background}`,
    borderRadius: 4,
    cursor: 'pointer',
    transition: 'color 0.3s, border-color 0.3s',
    ':hover': {
      color: 'white',
      backgroundColor: colors.background,
    },
  },
  disabled: {
    opacity: 0.5,
    cursor: 'not-allowed',
  },
});

3. 修正模板字符串语法错误 #

你之前的border: \2px solid $background}`存在语法错误，需改为${colors.background}`才能正确引用Stylex变量。

4. 重启Next.js开发服务器 #

修改Babel配置后，必须重启开发服务器才能让配置生效。

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