Точки останова попутного ветра не работают с Next.js SSG

#reactjs #next.js #css-grid #tailwind-css #postcss

Вопрос:

У меня /latest в pages каталоге есть страница, на которой отображаются все последние сообщения. Но мои классы попутного ветра ( grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 ) не хотят работать. Вот параллельное сравнение проблемы, с которой я сталкиваюсь:

Локальная версия	Производственная версия

Мой компонент выглядит так ( ./pages/latest.tsx ):

 const Latest: React.FC<LatestProps> = ({}) => {
  const { t } = useTranslation('latest')
  const { data, loading } = useFindLatestQuery()

  return (
    <>
      <Navigation />
      <DefaultWrapper>
        <div className="w-full">
          <div className="w-full flex justify-center">
            <h1>{t('recent')}</h1>
          </div>
          {!loading amp;amp; data?.posts?.length > 0 ? (
            <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4">
              {[...data.posts].map((post, index) => (
                <SearchedPost key={index} post={post as unknown as Post} />
              ))}
            </div>
          ) : (
            <p>Loading...</p>
          )}
        </div>
      </DefaultWrapper>
    </>
  )
}

Вот ссылка на рабочий CSS, созданный Tailwind, и вы увидите, что с ним ничего не связано grid . Вот также ссылка на эту сборку.

Конфигурация попутного ветра:

 module.exports = {
  // mode: 'jit',
  purge: [
    './components/**/*.{js,jsx,ts,tsx}',
    './pages/**/*.{js,jsx,ts,tsx}',
    './icons/**/*.{js,jsx,ts,tsx}',
  ],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

1. В вашем производственном css нет класса сетки, дважды проверьте настройки попутного ветра.

2. @херби вайн, ты понял, почему? У меня аналогичная проблема, некоторые точки останова не работают.

3. я смотрю на то, что я сделал. прошло много времени, так что нужно еще раз взглянуть на мою загадочную программу, ха-ха

Ответ №1:

Что касается того, почему произошла эта ошибка, я, честно говоря, не знаю.

Я снова посмотрел на исходный код. Самый первый коммит этого кода был здесь, и с тех пор он практически не изменился. Я также передал это конкретное обязательство, и все сработало нормально. Ошибка, должно быть, была связана с кэшированием. Я опубликую все ссылки и коммиты ниже:

Производственная версия

Промежуточная версия (в которой была ошибка)

Извините, если это не поможет вашей ошибке. Не стесняйтесь заглядывать в репо, где у меня была ошибка и/или комментарий 🙂