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

ddhy6vgd 于 5个月前发布在 React

关注(0)|答案(2)|浏览(100)

我想在我的新项目中使用StyleX，但我在尝试使用它时遇到了一些麻烦（与NextJS一起使用）。
我不明白如何配置“next.js.js”文件（创建“babel.js.js”文件会与“next.js.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.js.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。

reactjs

来源：https://stackoverflow.com/questions/77728522/how-to-install-stylex-in-a-new-react-project

2条答案

按热度按时间

ldxq2e6h1#

这是简单的设置。首先，安装这个插件，

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。

赞(0）回复(0）举报 5个月前

ckocjqey2#

使用Babel的项目不支持next/font。请删除next/font的用法。

赞(0）回复(0）举报 5个月前