Laravel mix + TailwindCSS 运行 npm run watch 无限重新编译 CSS

先说答案，参考的是：https://github.com/laravel-mix/laravel-mix/issues/1942

序言

最近在筹划着本博客新主题设计，想运用现代化前端技术，再加之对 Laravel mix 有一定的使用经验，所以选择了 Laravel mix 作为脚手架

问题

webpack.mix.js 配置：

const mix         = require('laravel-mix');
require('mix-tailwindcss');

mix.disableSuccessNotifications()
    .ts('src/app.ts', 'theme/assets')
    .setPublicPath('theme/assets')
    .sass("src/assets/sass/app.scss", "theme/assets")
    .tailwind('./tailwind.config.js')
    .webpackConfig({
      module: {
        rules: [
          {
            test:    /\.tsx?$/,
            loader:  "ts-loader",
            exclude: /node_modules/
          }
        ]
      }
    })

mix.browserSync({
  proxy: '127.0.0.1:3792',
  files: ["theme/**/*.php", "src/*.js", "src/*.css"],
  open:  false
})

tailwind.config.js 配置：

module.exports = {
  content: require('fast-glob').sync([
    './src/**/*.{html,js,ts}',
    './node_modules/tw-elements/dist/js/**/*.js',
    './theme/**/*.php'
  ]),
  theme:   {
    extend: {},
  },
  plugins: [
    require('tw-elements/dist/plugin')
  ],
}

使用上述的配置，然后运行 npm run watch，就看到终端一直闪烁着编译结果，然后电脑风扇呼呼狂啸：

解决方案

还好我用 Google + 英文搜索（用的蹩脚英文 ?），然后找到了这个 issues：
https://github.com/laravel-mix/laravel-mix/issues/1942

翻啊翻，发现这个人给出的解决方案是可行的：https://github.com/laravel-mix/laravel-mix/issues/1942#issuecomment-998148038

1. 首先安装 glob

   • npm：npm install fast-glob -D
   • yarn：yarn add fast-glob -D

2. 然后将 tailwind.config.js 改为：

module.exports = {
    // 看这里
    content: require('fast-glob').sync([
    './src/**/*.{html,js,ts}',
    './node_modules/tw-elements/dist/js/**/*.js',
    './theme/**/*.php'
    ]),
    theme: {
        extend: {},
    },
    plugins: [],
}

然后就完美解决了