Next.js: أنماط تومض في dev باستخدام وحدات Tailwind + css

تم إنشاؤها على ٣ مايو ٢٠٢٠ · 13تعليقات · مصدر: vercel/next.js

تقرير الشوائب

وصف الخطأ

أنا أستخدم Tailwindcss مع وحدات css وألاحظ أنه في المرة الأولى التي يتم فيها تحميل الصفحة ، لم يتم تحميل جميع الأنماط الخاصة بي. في محاولة لمعرفة ما كان يحدث ، قمت بتشغيل مثال Tailwindcss وأضف نمطًا من وحدة css ويحدث هناك أيضًا ، حتى عندما تم تصميمه من أجل prod.

لإعادة إنتاج

قم بتشغيل المثال من https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcss

قم بإضافة ملف index.module.css بنمط ما

أضف الأنماط من وحدة css في صفحة index.js

سلوك متوقع

بدون استخدام وحدات css ، يتم تحميل جميع الأنماط بشكل جيد في المرة الأولى ، دون وميض. يُتوقع نفس السلوك باستخدام وحدات css النمطية

لقطات

May-03-2020 14-06-19

معلومات النظام

نظام التشغيل: macOS
المتصفح (إن وجد) [على سبيل المثال chrome، safari]
إصدار Next.js: v9.3.6
إصدار Node.js: v13.12.0
إصدار Tailwindcss: v1.4.4

bug 2 next

مصدر

tafelito

👍9

التعليق الأكثر فائدة

يوجد حل بديل لحل هذه المشكلة
أنشئ " _document.js " مخصصًا وأضف الفئة " no-fouc " في مكون Html
أنشئ " _app.js " مخصصًا وأضف الكود التالي في " componentDidMount "

const removeFouc = (foucElement) => {
      foucElement.className = foucElement.className.replace('no-fouc', 'fouc')
    }
 removeFouc(document.documentElement)

أضف إضافة هذه الأنماط في الأنماط العامة:

.no-fouc {
  visibility: hidden;
 opacity: 0;
}

.fouc {
 visibility: visible;
 opacity: 1;
}

fadonascimento في ٣ يونيو ٢٠٢٠

👍6 😕1 👎1

ال 13 كومينتر

أظن أن هذا قد يكون له علاقة بالتقسيم التلقائي للتعليمات البرمجية لوحدات css النمطية 🤔

Pytal في ٧ مايو ٢٠٢٠

ربما تتعلق بـ https://github.com/zeit/next.js/issues/10268

mzygmunt في ٨ مايو ٢٠٢٠

👍1

لقد استخدمت وحدات css العادية للمكونات والأنماط التي يتم تطبيقها بعد بضع مللي ثانية.

dani97 في ٢٧ مايو ٢٠٢٠

لقد استخدمت وحدات css العادية للمكونات والأنماط التي يتم تطبيقها بعد بضع مللي ثانية.

وفقًا لـ https://stackoverflow.com/a/42969608/943337 ، قمت للتو بإضافة علامة نصية فارغة ومشكلة الشريط الجانبي التي ظهرت عند التحميل الأول ، تم حلها الآن.

https://github.com/vercel/next-plugins/issues/455#issuecomment -489452379

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { GA_TRACKING_ID } from '../utils/anayltics';
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="de">
        <Head>
        </Head>
        <body>
          <Main />
          <NextScript />
          {/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
          <script> </script>
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Adrianjs42 في ٢٧ مايو ٢٠٢٠

لقد استخدمت وحدات css العادية للمكونات والأنماط التي يتم تطبيقها بعد بضع مللي ثانية.
وفقًا لـ https://stackoverflow.com/a/42969608/943337 ، قمت للتو بإضافة علامة نصية فارغة ومشكلة الشريط الجانبي التي ظهرت عند التحميل الأول ، تم حلها الآن.
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { GA_TRACKING_ID } from '../utils/anayltics';
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="de">
        <Head>
        </Head>
        <body>
          <Main />
          <NextScript />
          {/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
          <script> </script>
        </body>
      </Html>
    );
  }
}

export default MyDocument;

شكرًا @ Adrianjs42 ، توقف الشريط الجانبي الذي

dani97 في ٢٨ مايو ٢٠٢٠

أيضا ذات الصلة
https://github.com/vercel/next.js/issues/13058

webdeb في ٣١ مايو ٢٠٢٠

const removeFouc = (foucElement) => {
      foucElement.className = foucElement.className.replace('no-fouc', 'fouc')
    }
 removeFouc(document.documentElement)

أضف إضافة هذه الأنماط في الأنماط العامة:

.no-fouc {
  visibility: hidden;
 opacity: 0;
}

.fouc {
 visibility: visible;
 opacity: 1;
}

fadonascimento في ٣ يونيو ٢٠٢٠

👍6 😕1 👎1

يجب إصلاح هذا في next@^9.4.5-canary.15 ! يرجى الترقية وإخبارنا.

Timer في ٢٢ يونيو ٢٠٢٠

👍3 🎉2 👎1

Timer ، لقد قمت بتثبيت next@^9.4.5-canary.18 . الآن لا يظهر وميض CSS في وضع التطوير ، لكنه يظل كما هو في إصدار الإنتاج . نسخة الإنتاج لا تزال تحتوي على الخطأ.

لاحظ أنني أستخدم وحدات material-ui + css

إليك إصدار من التطبيق الذي كنت أعمل عليه لمواجهة هذه المشكلة: https://cluster-11-lwj6nmcgy.vercel.app/ .

Prottoy2938 في ٢٤ يونيو ٢٠٢٠

👀1

@ Prottoy2938 كذلك هنا. لقد علقت على هذه المشكلة https://github.com/vercel/next.js/issues/13058#issuecomment -654165987

casperle في ٦ يوليو ٢٠٢٠

Timer ، لقد قمت بتثبيت next@^9.4.5-canary.18 . الآن لا يظهر وميض CSS في وضع التطوير ، لكنه يظل كما هو في إصدار الإنتاج . نسخة الإنتاج لا تزال تحتوي على الخطأ.
لاحظ أنني أستخدم وحدات material-ui + css
إليك إصدار من التطبيق الذي كنت أعمل عليه لمواجهة هذه المشكلة: cluster-11-lwj6nmcgy.vercel.app .

يبدو أن حالتك غير مرتبطة بوحدات css / Tailwind وأكثر ارتباطًا بنسيان تنفيذ العرض المسبق لواجهة المستخدم المادية: https://github.com/vercel/next.js/issues/7322#issuecomment -653858948

timneutkens في ٦ يوليو ٢٠٢٠

casperle ، في حالتي كانت المشكلة لأنني كنت أقوم بإجراء عرض من جانب الخادم . لقد اتبعت هذه الوثائق من واجهة المستخدم المادية وقمت بإصلاح المشكلة

Prottoy2938 في ٦ يوليو ٢٠٢٠

مع v9.4.5-canary.28 لا يتأرجح في dev ويومض في الإنتاج.