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

0 laravel-mix tailwind-css

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

purge: [
    '**/*.+(html|php)',
    'partials/*.+(html|php)',
    '*.php',
    '*.html'
  ],
Run Code Online (Sandbox Code Playgroud)

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

https://i.stack.imgur.com/nNUme.jpg

TAILWIND 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',
          },
        }
      })
    }
  ],
}
Run Code Online (Sandbox Code Playgroud)

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,
});
Run Code Online (Sandbox Code Playgroud)

小智 8

纱线添加 fast-glob -D 然后或 npm i fast-glob -D

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

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