Блог

Главная - Вопросы по программированию - Веб-пакет JIT TailwindCSS HMR продолжает перекомпилироваться с помощью themekit

Веб-пакет JIT TailwindCSS HMR продолжает перекомпилироваться с помощью themekit

#webpack #shopify #webpack-dev-server #jit #tailwind-css

Вопрос:

Я пытаюсь использовать функцию JIT TailwindCSS в пользовательском проекте Webpack с помощью Themekit, и при запуске yarn start сервера разработчиков webpack HMR продолжает перекомпиляцию.

Код: https://github.com/3daddict/themekit-webpack/pull/63

пакет.json

 {
"scripts": {
...
    "start": "TAILWIND_MODE=watch webpack serve --mode=development --config webpack.dev.js",
...
  }
}

tailwind.config.js

 module.exports = {
  mode: 'jit',
  purge: {
    enabled: true,
    content: [
      './dist/**/*.liquid',
      './dist/**/*.js',
    ],
  },
  ...
}

src/компоненты/tailwind.css

 /* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind utilities;
...

Горячая перезагрузка модуля сервера разработчиков Webpack продолжает перекомпилироваться снова и снова. Я застрял, пытаясь понять, в чем причина.

 ℹ ｢wdm｣: webpack compiled successfully
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...
ℹ ｢wdm｣: webpack compiled successfully
ℹ ｢wdm｣: Compiled successfully.

Комментарии:

1. Вы нашли решение? У меня проблема с включенным JIT Tailwind Laravel Mix, где JIT делает все очень медленным, потому что каждый раз, когда я вношу изменения, он пытается перекомпилировать все файлы css/sass/и т. Д.

2. Пока ничего не похоже на то, что моя проблема связана с tailwindcss.com/docs/… Я еще не смог настроить очистку с включенным jit таким образом, чтобы это работало…

3. Мне действительно удалось исправить медленность времени перекомпиляции. Но что касается проблемы с бесконечным циклом, с которой вы столкнулись, я на самом деле столкнулся с той же проблемой, когда попытался поработать с настройками пути очистки, теперь я использую это, и это работает нормально : purge: ["./resources/**/*.{js,vue,blade.php}"]

4. @xperator это content: ["./src/**/*.{js,liquid}"], , кажется, исправило бесконечный цикл! Теперь мне просто нужно понять, почему он сломал HMR. Спасибо за совет!!

5. Приятно слышать, что ты это исправил. Хотя я не могу догадаться, что проблема с ГРМ, но для меня все было подстроено, чтобы переместить мой файл шрифта импорта за мою дерзость файла и отключения CSS URL-адрес обработки полностью ( processCssUrls: false, ) и копировать шрифты В общем каталоге, используя webpack plugin и просто объявить шрифтов в мой попутный ветер CSS-файл на базовый слой ( @layer base ). Подумал, может, это поможет.

Метки: