WSL2 上的 Tailwind 热重载无法正常工作

Question

哦/

刚刚开始使用 Remix 和 TailwindCSS 进行一个新的个人项目。原始 Remix 安装时一切正常，但当我添加 Tailwind 时，CSS 热重载被破坏。应用添加的第一个类，但不应用下一个类。

我认为它一定与 WSL2（Linux 的 Windows 子系统）有关，因为它在我的 Linux 笔记本电脑上运行良好。

我的配置与Remix 文档中描述的完全一致。

环境

WSL2 with Ubuntu 20.04
node: v16.13.2 (also tried with v17.4.0)
npm: v8.4.0

应用程序/root.tsx

...
import tailwindStylesUrl from "./tailwind.css";

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: tailwindStylesUrl,
    },
  ];
};
...

tailwind.config.js

module.exports = {
  content: ["./app/**/*.{ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

包.json

...
"scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -o ./app/tailwind.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -o ./app/tailwind.css --watch",
    "postinstall": "remix setup node",
    "start": "remix-serve build"
  },
  "dependencies": {
    "@remix-run/react": "^1.1.3",
    "@remix-run/serve": "^1.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "remix": "^1.1.3"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.1.3",
    "@types/react": "^17.0.24",
    "@types/react-dom": "^17.0.9",
    "concurrently": "^7.0.0",
    "tailwindcss": "^3.0.17",
    "typescript": "^4.1.2"
  },
...

安慰

$ npm run dev

> dev
> concurrently "npm run dev:css" "remix dev"

[0]
[0] > dev:css
[0] > tailwindcss -o ./app/tailwind.css --watch
[0]
[1] (node:16121) ExperimentalWarning: stream/web is an experimental feature. This feature could change at any time
[1] (Use `node --trace-warnings ...` to show where the warning was created)
[1] (node:16121) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
[1] Watching Remix app in development mode...
[1]  Built in 258ms
[1] Remix App Server started at http://xxx.xx.xxx.xx:3000
[0]
[0] Rebuilding...
[0] Done in 117ms.
[1]  File changed: app/tailwind.css
[1]  Rebuilding...
[1]  Rebuilt in 48ms
[0]
[0] Rebuilding...
[0] Done in 14ms.
[1]  File changed: app/root.tsx
[1]  Rebuilding...
[1]  Rebuilt in 51ms

感谢您的帮助

Answer 1

对于遇到此问题的人来说，热重载功能在 WSL2 中不起作用的一个可能原因（尽管根据评论，这不是针对该特定用户的）是该项目存储在 Windows 驱动器上，而不是存储在 Windows 驱动器上。 WSL2 ext4 文件系统。

目前，inotify9P 文件系统驱动器上的 WSL2 不支持热重载使用的 Linux API（例如安装到 WSL2 中的 Windows 驱动器）。

通常至少有三种解决方案：

• 例如，将项目文件移动到 WSL2 中的 ext4 文件系统中，/etc/home/<username>/src或者/etc/home/<username>/projects. 该文件系统支持 inotify。

• 使用 WSL1——大多数 Web 开发不需要 WSL2 的本机 Linux 内核功能，并且在 WSL1 下也能正常工作（有时更好）。您可以通过运行从 WSL2 切换到 WSL1 wsl --set-version <distroname> 1，但我建议先进行备份（通过wsl --export），以防转换出现问题。

• 正如 OP 在本例中所做的那样，通过 VSCode 和“Remote - WSL”扩展访问该项目。由于一旦他们纠正了“WSL - Remote”扩展的问题，它就开始再次为OP工作，我仍然怀疑inotify可能是根本原因。

Answer 2

不理想，但我找到了出路。\n如果我使用 tailwind 作为 postcss 插件，文件会正确热重新加载。\xe2\x80\x8d\xe2\x99\x80\xef\xb8\x8f

\n

编辑：我想我发现了问题所在。我没有注意到我的 VSCode 不再运行 WSL 远程。自从我重新激活它以来，一切正常。

\n