tailwind-css - Laravel-mix 与 browserSync 和 tailwindCss 导致无限重载错误

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({}) block ，监视命令 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 的一个已知问题:

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