0

我想用 React、esbuild 和 tailwindcss 创建工作流。在 tailwind 文档中，他们说除了创建配置文件之外，我还需要将几个 @tailwind 指令放入 src/input.css 并使用以下命令运行编译：

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

所以我这样做了，结果看起来像是脚手架或 CSS 重置，内部没有实用程序类，而且我希望它与我的自定义 CSS 一起工作，这非常简单，因为在我学习 esbuild 时我做到了还没有使用预处理器，所以我采取了两种方法：

  1. 我已将 /src/input.css 添加到 esbuild.serve.js 中的 entryPoints 中，如下所示：
import esbuildServe from "esbuild-serve";

esbuildServe(
  {
    publicPath: "http://127.0.0.1:7000/",
    entryPoints: ["src/app.tsx", "src/app.css", "src/input.css"],
    outdir: "public",
    // external: ["react", "react-dom"], comented out -throws error cannot use import statement outside a module
    loader: {
      ".png": "file",
      ".jpg": "file",
      ".jpeg": "file",
      ".svg": "file",
      ".gif": "file",
    },
    assetNames: "assets/[name]-[hash]",
    chunkNames: "chunks/[name]-[hash]",
    entryNames: "[dir]/[name]", //-[hash]
    splitting: true,
    format: "esm",
    minify: true,
    bundle: true,
    sourcemap: "external",
    // target: ["es2020", "chrome58", "firefox57", "safari11", "edge16", "node12"],
    pure: ["console.log"],
    resolveExtensions: [".tsx", ".ts", ".jsx", ".js", ".css", ".json"],
    inject: ["./process-shim.js", "./react-shim.js"],
  },
  { port: 7000, root: "public" }
);

但即使这个重置也被我的其他样式表完全覆盖，我收到警告说：

 > src/input.css:3:0: warning: "@tailwind" is not a known rule name
    3 │ @tailwind utilities;
      ╵ ~~~~~~~~~

所以我的第二个想法是将这些顺风指令包含到我的主 CSS 文件中，并像这样一起构建它：

//app.css
@import "./components/test.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
.color-heading {
  color: tomato;
}

但是，结果是在我的 out.css 中我有这些导入，但没有来自顺风的预期 CSS。从这里开始，我不知道该怎么办。这些是我的脚本：

  "scripts": {
    "build": "node ./esbuild.config.js",
    "watch": "npm run build -- --watch",
    "start": "npm run css && node ./esbuild.serve.js -w ",
    "lint": "eslint --fix --debug --cache",
    "test": "jest",
    "css": "npx tailwindcss -i ./src/app.css -o ./public/app.css"
  },

任何帮助将不胜感激，谢谢。

4

0 回答 0