Tailwind/LaravelMix - 手表上的无限循环

Question

问题是当我运行 npm run watch 在控制台不断循环。我的 CPU 会爆炸。我发现问题出在 tailwind.config.js 文件中。

purge: [
    '**/*.+(html|php)',
    'partials/*.+(html|php)',
    '*.php',
    '*.html'
  ],

问题出在这些路径上，因此出于某种原因对于以文件夹名称部分开头的这条路径工作正常，其他 3 个有问题。如果我设置以父文件夹名称开头，则无法观看这些文件并且我的 Tailwind 坏了

https://imgur.com/a/SMnlWxk

顺风tailwind.config.js

module.exports = {
  purge: [
    '**/*.+(html|php)',
    'partials/*.+(html|php)',
    '*.php',
    '*.html'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    colors: {
      primary: '#15192B',
      secondary: '#2EAEE4',
      neutral: '#436576',
      white: '#fff',
      black: '#000'
    }
  },
  variants: {
    extend: {},
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.container': {
          maxWidth: '100%',
          
          '@screen sm': {
            maxWidth: '640px',
          },
          '@screen md': {
            maxWidth: '768px',
          },
          '@screen lg': {
            maxWidth: '1300px',
          },
        }
      })
    }
  ],
}

LaravelMix webpack.mix.js

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

mix.js('assets/src/js/index.js', 'assets/dist/dist-index.js');
mix.sass('assets/src/sass/style.scss', 'assets/dist/dist-style.css');
mix.options({
  postCss: [ tailwindcss('./tailwind.config.js') ],
});
mix.copyDirectory('assets/src/media/', 'assets/dist/media/');

mix.browserSync({
    watch: true,
    files: [
      'assets/src/js/*',
      'assets/src/sass/*',
      'assets/src/sass/**/*',
      '**/*.+(html|php)',
      '*.php'
    ],
    proxy: 'site.local',
    host: 'site.local',
    open: 'external',
    reloadDelay: 0,
});

Answer 1

yarn add fast-glob -D and then or npm i fast-glob -D

module.exports = {
content: require('fast-glob').sync([
    './**/*.php'
]),
theme: {
    extend: {},
},
plugins: [],

https://tailwindcss.com/docs/content-configuration#styles-rebuild-in-an-infinite-loop

Tailwind/LaravelMix - 手表上的无限循环

Tailwind/LaravelMix - Infinity Loop on watch

laravel-mix

tailwind-css