如何在 Vite 中以监视模式运行 AlpineJS 和 TailwindCSS

Question

背景

我尝试独立使用 AlpineJS。然后，当我尝试使用其他解决方案作为 node_module 时，它们无法组合使用或需要太多调整/设置。所以我使用 Vite 安装 AlpineJS。然后添加TailwindCSS和其他所需的包。它们都可以无缝地组合在一起，我很高兴直到我开始进行此设置。

问题

使用Vite时，我必须运行

npm run dev

来运行并观察服务器。但 Tailwind 也有自己的

watch

命令。当我运行

npm run dev

时，它不会运行 Tailwind 的命令。因此，我打开了两个终端选项卡并在监视模式下运行这两个命令。但是更改 Tailwind 类不会对我的设计产生任何影响，尽管 TailwindCSS 监视模式是同时构建的。

问题是：
👉 TailwindCSS 在 Vite 观看模式下未构建

失败的解决方法

我尝试了所有我能做的，包括尝试 StackOverflow 解决方案、ChatGPT 和 Gemini。以下是其中一些：

🚫 使用两个不同的终端

我运行了两个不同的终端或终端选项卡来同时运行进程，它们都单独工作，但我没有看到 TailwindCSS 设计有任何变化。

🚫 使用

&&

我尝试连接

package.json

中的命令

"scripts": {
  "dev": "vite && tailwind:watch", //👈
  "build": "vite build && tailwind:build",
  "preview": "vite preview",
  "tailwind:watch": "tailwindcss -i ./src/assets/css/app.css -o ./dist/assets/css/app.min.css --watch",
  "tailwind:build": "tailwindcss -i ./src/assets/css/app.css -o ./dist/assets/css/app.min.css"
},

🚫 使用

concurrently

我尝试了

concurrently

并将我的

dev

命令更改为：

"scripts": {
  "dev": "concurrently \"npm run vite\" && \"npm run tailwind:watch\"", //👈
  "tailwind:watch": "tailwindcss -i ./src/assets/css/app.css -o ./dist/assets/css/app.min.css --watch",
},

🚫 强制删除Vite缓存

我了解到Vite有一个缓存系统，可以通过使用

--force

参数和

vite

命令来清除，所以我尝试了但没有运气：

"scripts": {
  "dev": "concurrently \"npm run vite --force\" && \"npm run tailwind:watch\"", //👈
  "tailwind:watch": "tailwindcss -i ./src/assets/css/app.css -o ./dist/assets/css/app.min.css --watch",
},

解决方案❓

唯一的解决方案（？）我在将任何 TailwindCSS 类更改为代码时得到了这个：

1. 停止Vite
2. 运行 TailwindCSS 构建
3. 再次重新运行Vite 😢

但是，到底为什么它们不结合起来工作呢？

编辑

使用 PostCSS 替代方案

根据 Ihar 的建议，我尝试使用 PostCSS 来实现 Tailwind，但还是坚持使用

postcss.config.js

。代码如下：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

出现错误：

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/Users/Foo/TRYOUTS/myproject): [ReferenceError] module is not defined in ES module scope

所以我尝试了：

const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");

module.exports = {
  plugins: [tailwindcss({}), autoprefixer({})],
};

同样的错误仍然存在。

解决该问题的唯一建议是使用 Babel。是吗？

Answer 1

这不是一个解决方案，但至少我不必每次更改 Tailwind CSS 类时都停止并启动服务器。

我在根目录中创建了一个

vite.config.js

文件，其中包含以下内容：

import { defineConfig } from "vite";
import { version } from "./package.json";

const hash = Math.floor(Math.random() * 90000) + 10000;

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `[name].js?v=${hash}`,
        chunkFileNames: `[name].js?v=${hash}`,
        assetFileNames: `[name].[ext]?v=${hash}`,
      },
    },
  },
});

在根目录中，我运行了两个终端/选项卡，其中一个正在运行：

npm run dev

另一个正在运行：

npx tailwindcss -i ./src/assets/css/app.css -o ./dist/assets/css/app.min.css --watch

现在，每次我更改

./index.html

时，Tailwind 都会在一个终端上自行构建。要触发另一个终端 (Vite)，我只需打开

package.json

并点击保存，这会触发 Vite 重新启动，这就是 Tailwind 的更改进入视图的方式。

至少我不需要停止和启动服务器。