@callstack/repack-plugin-nativewind

用 Rspack 或 Webpack 构建您的 React 本地应用程序的工具包 .

@callstack/repack-plugin-nativewind 是用于 @callstack/repack 能够整合 原生窗口 进入您的“反应原生”项目.

关于

这个插件通过:

• 为您的样式表配置 PostCSS 和 Tailwind CSS 处理
• 处理 CSS 转换为反应本地兼容样式
• 为土著Wind的JSX运行时间建立适当的SWC转型

安装

首先,跟随这些步骤 从官员 本地窗口安装指南数字 :

1. 安装本地窗口
2. 设置 Tailwind CSS
3. 导入您的 CSS 文件
4. (备选) 设置类型脚本支持

然后安装 Re.Pack 本地 Wind 插件, 它是依赖性 :

npm install -D @callstack/repack-plugin-nativewind postcss postcss-loader autoprefixer

这些额外的依赖性(postcss, (中文(简体) ), postcss-loader,以及 autoprefixer用于处理Tailwind CSS和Webpack/Rspack,具体如下: 正式的 Tailwind CSS Rspack 指南它们允许在您的构建管道中处理和自动修复 CSS 样式.

使用量

说明: 如果您使用 Webpack( 不是 Rspack) , 您需要在您的配置中添加以下配置 babel.config.js数字 :

plugins: [
  [
    '@babel/plugin-transform-react-jsx',
    {
      runtime: 'automatic',
      importSource: 'nativewind',
    },
  ],
],

插件

要将插件添加到您的 Re.Pack 配置中,请更新您的 rspack.config.js 或者说 webpack.config.js 内容如下:

import { NativeWindPlugin } from "@callstack/repack-plugin-nativewind";

export default (env) => {
  // ...
  return {
    // ...
    plugins: [
      // ...
      new NativeWindPlugin(),
    ],
  };
};

看看我们的网站 https://re-pack.dev (英语) 需要更多信息和文档或我们的 GitHub: https://github.com/callstack/再包装。 。 。 .

由 Calltack 制作

@callstack/repack 是一个开源项目,将永远自由使用。 如果你觉得这很酷,请 显示它. 调用 一群反动和反动的本地怪人 联系我们 你好@ callstack.com 如果你需要帮忙的话 或者只是想打个招呼!

喜欢这个项目吗 加入队伍吧 谁为客户做惊人的事情 驱动 React Independent Open Source