Next.js(TurboRepo)项目中StyleX defineVars不生效求助

我在基于 Next.js（TurboRepo）的项目中使用 StyleX 开发样式，但 stylex.defineVars 定义的设计令牌无法正常生效。项目结构、配置及使用方式如下：

项目结构 #

├── README.md
├── apps
|  ├── docs
|  └── web
|     └── app
|        └── log
|           └── page.tsx
├── packages
|  ├── eslint-config
|  ├── typescript-config
|  └── ui
|     ├── src
|     |  └── designToken.stylex.ts
|     ├── .babelrc.js
|     ├── babel.config.js
|     ├── next.config.js
|     └── package.json
└── turbo.json

关键配置文件 #

packages/ui/.babelrc.js #

const path = require("path");

module.exports = {
  presets: ["next/babel"],
  plugins: [
    [
      "@stylexjs/babel-plugin",
      {
        dev: process.env.NODE_ENV === "development",
        genConditionalClasses: true,
        treeshakeCompensation: true,
        unstable_moduleResolution: {
          type: "commonJS",
          rootDir: path.join(__dirname, "../.."),
        },
      },
    ],
  ],
};

packages/ui/babel.config.js #

import styleXPlugin from "@stylexjs/babel-plugin";

const config = {
  plugins: [
    [
      styleXPlugin,
      {
        dev: true,
        test: false,
        unstable_moduleResolution: {
          type: "commonJS",
          rootDir: __dirname,
        },
      },
    ],
  ],
};

export default config;

packages/ui/package.json（exports 片段） #

{
  "exports": {
    "./designToken.stylex": "./src/designToken.stylex.ts"
  }
}

使用示例（apps/web/app/log/page.tsx） #

import { colors, margins } from "@repo/ui/designToken.stylex";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  autoSaveText: {
    color: colors.primary100,
    marginBottom: margins.extraLarge,
  },
});

const Log = () => {
  return (
    <p {...stylex.props(styles.autoSaveText)}>자동 저장 21:10:27</p>
  );
};

export default Log;

尽管导入路径正确、控制台无报错，但样式完全不生效，仅针对 stylex.defineVars 定义的令牌存在问题。

排查方向与解决方案 #

1. 统一 Babel 配置，消除冲突 #

项目同时存在 .babelrc.js 和 babel.config.js，会导致 Babel 加载逻辑混乱，StyleX 插件无法正确处理跨包变量引用：

• 删除 .babelrc.js，保留 babel.config.js 并修正配置：

  import styleXPlugin from "@stylexjs/babel-plugin";
  import path from "path";
  
  const config = {
    presets: ["next/babel"], // 补上 Next.js 编译预设
    plugins: [
      [
        styleXPlugin,
        {
          dev: process.env.NODE_ENV === "development",
          test: false,
          unstable_moduleResolution: {
            type: "commonJS",
            rootDir: path.join(__dirname, "../.."), // 指向 monorepo 根目录，确保跨包解析
          },
        },
      ],
    ],
  };
  
  export default config;
  

2. 给使用变量的 Next.js 应用配置 StyleX 插件 #

当前仅在 packages/ui 中配置了 StyleX 插件，但实际使用变量的是 apps/web，需要在 apps/web/next.config.js 中添加配置：

const stylexPlugin = require("@stylexjs/nextjs-plugin");
const path = require("path");

module.exports = stylexPlugin({
  rootDir: path.join(__dirname, "../.."), // 指向 monorepo 根目录
})({
  // 原有 Next.js 配置
});

3. 验证设计令牌定义格式 #

检查 packages/ui/src/designToken.stylex.ts，确保变量通过 stylex.defineVars 定义，而非普通对象：

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

export const colors = stylex.defineVars({
  primary100: "#165DFF",
  // 其他颜色变量
});

export const margins = stylex.defineVars({
  extraLarge: "24px",
  // 其他间距变量
});

4. 清理 TurboRepo 缓存 #

TurboRepo 的构建缓存可能复用未处理的旧代码，执行以下命令清理后重启服务：

npx turbo clean
npm run dev

5. 确认 TypeScript 模块解析正确 #

检查 apps/web/tsconfig.json 的路径别名配置，确保 @repo/ui 能正确解析：

{
  "extends": "@repo/typescript-config/nextjs.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@repo/ui/*": ["../../packages/ui/src/*"]
    }
  }
}

6. 检查样式应用方式 #

确保在 stylex.create 中正确引用变量，并通过 stylex.props 应用样式，避免直接将变量作为原生样式值使用。

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