Tailwind配置中Purge选项匹配PHP文件引发Laravel Mix无限编译问题求助

我之前也碰到过完全一样的糟心事！这种无限循环大概率是因为通配符不小心匹配到了Laravel Mix的输出目录，或者触发了不必要的文件变更检测，给你几个实用的优化方案：

方案1：修正通配符语法 + 排除输出目录 #

首先你的purge.content里有个小语法错误：./assets/**/*.{.js|.scss}应该改成./assets/**/*.{js,scss}（去掉扩展名前的多余点，用逗号分隔多类型而非竖线）。然后针对PHP文件，我们可以明确排除Mix的输出目录（比如你这里的build文件夹），避免监听编译后的文件触发循环：

purge: {
    enabled: true,
    content: [
        './assets/**/*.{js,scss}',
        './**/*.php',
        '!./build/**/*', // 用!符号排除输出目录，避免监听编译产物
    ],
    safelist: [
        // 列出数据库存储等需要保留的Tailwind类
        // 'classname',
    ],
}

方案2：更精准的目录匹配 #

如果不想用./**/*.php这么宽泛的匹配，也可以用通配符指定实际用到的PHP目录，比逐个列文件简洁得多：

purge: {
    enabled: true,
    content: [
        './assets/**/*.{js,scss}',
        './*.php', // 匹配根目录下所有PHP文件
        './parts/**/*.php',
        './functions/**/*.php',
        // 按需添加其他PHP子目录
    ],
    safelist: [
        // 列出数据库存储等需要保留的Tailwind类
        // 'classname',
    ],
}

这种写法既不用手动列全根目录的PHP文件，也不会匹配到无关目录，能从根源避免循环触发。

方案3：调整BrowserSync的监听规则 #

如果上面的方法还是没解决，你可以在webpack.mix.js里给BrowserSync明确指定监听范围，排除输出目录：

const mix = require("laravel-mix");
mix.js("assets/js/main.js", "build/scripts.js")
   .sass("assets/scss/main.scss", "build")
   .sourceMaps()
   .browserSync({
       proxy: "wordpressthemedev.local",
       files: [
           "./assets/**/*.{js,scss}",
           "./**/*.php",
           "!./build/**/*" // 排除编译输出目录
       ]
   })
   .options({
       processCssUrls: false,
       postCss: [
           require("postcss-import"),
           require("tailwindcss"),
           require("postcss-nested"),
           require("autoprefixer"),
       ],
   });

为啥逐个列文件就没问题？因为你没有匹配到任何会被编译修改的文件，而宽泛的通配符可能不小心包含了Mix的临时文件或输出目录，导致每次编译完成后都触发新的监听事件，最终陷入循环。

内容的提问来源于stack exchange，提问作者Andy Holmes