Laravel-mix with browserSync，tailwindCss 导致无限重载bug

Question

在我最新的项目中，我使用 laravel-mix 和内置的 browserSync，并且我已经将 tailwindCss 添加为一个包。

这是webpack.mix.js 文件：

const mix = require("laravel-mix");
require('mix-html-builder');

mix
    .setResourceRoot("../")
    .setPublicPath("public/assets")
    .browserSync({
        proxy: 'xxx',
        host: 'xxx',
        files: "public/*",
        open: false,
        reloadOnRestart: true
    })
    .html({
        htmlRoot: './resources/html/pages/*.html',
        partialRoot: './resources/html/components',
        output: '..'
    })
    .copy("resources/images", "public/assets/images")
    .js("resources/js/app.js", "js")
    .postCss(
        "resources/css/app.css",
        "css",
        [
            require("postcss-import"),
            require("tailwindcss/nesting"),
            require("tailwindcss"),
            require("autoprefixer")
        ]
    )

只要我注释掉require("tailwindcss") 行或.html({}) 块，watch 命令npm run watch 运行良好，如果它们都打开，mix 命令将无限循环运行（在终端）。没有错误，一切都在运行，它不会再停止运行了：D

我的package.json如下：

{
    "name": "xxx",
    "version": "1.0.0",
    "description": "## Deployment",
    "main": "index.js",
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "repository": {
        "type": "git",
        "url": "xxx"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^5.11.0",
        "@typescript-eslint/parser": "^5.11.0",
        "alpinejs": "^3.8.1",
        "autoprefixer": "^10.4.2",
        "browser-sync": "^2.27.7",
        "browser-sync-webpack-plugin": "^2.3.0",
        "eslint": "^8.9.0",
        "eslint-plugin-import": "^2.25.4",
        "eslint-plugin-node": "^11.1.0",
        "filename-regex": "^2.0.1",
        "laravel-mix": "^6.0.41",
        "mix-html-builder": "^0.8.0",
        "postcss": "^8.4.6",
        "postcss-import": "^14.0.2",
        "stylelint": "^14.4.0",
        "stylelint-config-standard": "^25.0.0",
        "stylelint-order": "^5.0.0",
        "tailwindcss": "^3.0.19"
    }
}

我想我可能在某处遗漏了一个简单的设置，有人可以指出这可能出错的地方吗？

---

这种特殊情况的解决方案：

这是我的新 tailwind.config.js 文件，@reid-gannah 发布了他们的答案。起初我的内容配置指向管道的末端，由于项目最初是如何设置的，因此引发了无限装载错误。在更改文件结构（并实现mix-html-builder）之后，我从未意识到 Tailwind 仍然从生成的文件而不是源文件中读取。所以，下面的配置解决了我的问题：

module.exports = {
    mode: "jit",
    content: [
        './resources/html/pages/**/*.{html,js}',
        './resources/html/components/**/*.{html,js}',
        './resources/html/layouts/**/*.{html,js}',
    ],
    theme: {
        container: {
        },
        extend: {}
    },
    variants: {
        extend: {}
    },
};

Answer 1

啊，我想我发现了这里发生了什么。看起来这是 Tailwind 自己记录的 Webpack 的一个已知问题：

如果您的 CSS 似乎在无限循环中重新构建，则很有可能是因为您的构建工具在注册 PostCSS 依赖项时不支持 glob 选项。

许多构建工具（例如 webpack）不支持此选项，因此我们只能告诉它们查看特定文件或整个目录。例如，我们不能告诉 webpack 只查看目录中的 *.html 文件。

这意味着如果构建 CSS 导致这些目录中的任何文件发生更改，则会触发重建，即使更改的文件与 glob 中的扩展名不匹配。

这是他们的建议：

要解决此问题，请在内容配置中使用更具体的路径，确保仅包含在构建 CSS 时不会更改的目录：

module.exports = {
  content: [
    './src/**/*.{html,js}',
    './src/pages/**/*.{html,js}',
    './src/components/**/*.{html,js}',
    './src/layouts/**/*.{html,js}',
    './src/index.html',
  ],
  // ...
}

有点无赖，希望这会有所帮助。

来源：Tailwind CSS: Content Configuration