如何在新的React项目中安装META的StyleX

Question

我想在我的新项目中使用 StyleX，但在尝试使用它时遇到一些麻烦（与 NextJS 一起）。

基本上，我不明白如何配置“next.config.js”文件（创建“babel.config.js”文件会与“next.config.js”文件产生冲突）。

我基本上被困在项目的开始阶段，从 StyleX 文档中我看不到解决方案，也许我是盲目的或其他什么。

实际情况：

.babelrc.js 文件：

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

next.config.js 文件：

/** @type {import('next').NextConfig} */
const stylexPlugin = require("@stylexjs/nextjs-plugin");

const nextConfig = {
  reactStrictMode: true,
};

module.exports = stylexPlugin({
  rootDir: __dirname,
})(nextConfig);

module.exports = nextConfig;

错误：

“next/font”需要 SWC，尽管由于存在自定义 babel 配置而正在使用 Babel。

Answer 1

设置起来很简单。首先，安装这个插件，

npm install --save-dev @stylexjs/nextjs-plugin

如果根目录不存在，则创建一个

.babelrc.js

文件，并将以下配置添加到该文件中。

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

使用以下配置调整

next.config.js

文件。

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

const nextConfig = {
  reactStrictMode: true,
}

module.exports = stylexPlugin({
  rootDir: __dirname,
})(nextConfig);

现在，您已准备好探索

stylex

。