Laravel-与 browserSync 混合，tailwindCss 导致无限重载错误

Question

在我的最新项目中，我使用 laravel-与内置的 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 运行s 就很好，如果它们都是上，混合命令将运行无限期地无限循环（在终端中）。没有错误，每运行s，它不会再停止运行ning :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"
    }
}

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

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

这是我的 new 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 的一个已知问题：

If your CSS seems to be rebuilding in an infinite loop, there’s a good chance it’s because your build tool doesn’t support the glob option when registering PostCSS dependencies.

Many build tools (such as webpack) don’t support this option, and as a result we can only tell them to watch specific files or entire directories. We can’t tell webpack to only watch *.html files in a directory for example.

That means that if building your CSS causes any files in those directories to change, a rebuild will be triggered, even if the changed file doesn’t match the extension in your glob.

这是他们的推荐：

To solve this problem, use more specific paths in your content config, making sure to only include directories that won’t change when your CSS builds:

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

Laravel-与 browserSync 混合，tailwindCss 导致无限重载错误

Laravel-mix with browserSync, and tailwindCss causes infinite reloading bug

laravel-mix

tailwind-css

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