Stylex 错误：向 stylex 样式添加变量不起作用

Question

我正在为我的 Next.js 调查应用程序项目创建一个 stylex 设计系统。我想创建常量，以便能够使用 stylex.definevars 更改一处的值。当我这样做时，终端会抛出此错误，但我不知道如何解决它，因为这些值应该是恒定的。我发现它也不适用于像 redcolor = 'red' 这样的常规常量。使用文档增强 babelrc.js 也没有帮助。

babelrc.js
module.exports = {
  presets: ["next/babel"],
  plugins: [
    [
      "@stylexjs/babel-plugin",
      {
        dev: false,
        stylexSheetName: "<>",
        genConditionalClasses: true,
        runtimeInjection: true,
        useRemForFontSize: true,
        genConditionalClasses: true,
        // Default: undefined
        unstable_moduleResolution: {
          // Use this when using the Haste module system
          // Where all files are imported by filename rather
          // than relative paths and all filenames must be unique.
          type: 'haste',
          // Override `.stylex.js` with your own extension.
          themeFileExtension: string,
        },
      },
    ],
  ],
};

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',
  },
});

-- when i comment out hte wars i get an error
⨯ ./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

Answer 1

当您在 StyleX 中使用

defineVars

时，应直接从以

.stylex.js

结尾的文件导出，如文档中所述。 （其他文件结尾也有效）

接下来，在将 StyleX 与 Nextjs 结合使用时，您需要记住一些事项

请勿删除并导入在下一个应用程序中生成的

globals.css

在打字稿中使用导入路径别名时，您需要更新

babelrc

和

next.config

。 （导入 .stylex.ts 不适用于 tsconfig 路径设置）

在

.babelrc.js

文件中配置您项目的别名的绝对路径

module.exports = {
    presets: ["next/babel"],
    plugins: [
        [
            "@stylexjs/babel-plugin",
            {
                ...other configurations
                aliases: {
                    "@/*": [path.join(__dirname, "src/*")]
                },

            }
        ]
    ]
};

在stylexPlugin中配置你的项目的绝对路径

next.config

    stylexPlugin({
        rootDir: __dirname,
        aliases: {
            "@/*": [join(__dirname, "src/*")]
        }
    })