Next.js: tailwind + css 모듈로 dev에서 깜박이는 스타일

에 만든 2020년 05월 03일 · 13코멘트 · 출처: vercel/next.js

버그 신고

버그 설명

css 모듈과 함께 tailwindcss를 사용하고 있는데 페이지가 처음로드 될 때 모든 스타일이로드되지 않음을 알았습니다. 무슨 일이 일어나고 있는지 파악하기 위해 tailwindcss 예제를 실행하고 css 모듈에서 스타일을 추가했으며 prod 용으로 빌드 된 경우에도 발생합니다.

재현하려면

https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcss 에서 예제 실행

스타일이있는 index.module.css 파일 추가

index.js 페이지의 CSS 모듈에서 스타일을 추가합니다.

예상되는 행동

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 "을 (를) 만들고 Html 구성 요소에 " no-fouc "클래스를 추가합니다.
사용자 지정 " _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 에 2020년 06월 03일

👍6 😕1 👎1

모든 13 댓글

나는 이것이 CSS 모듈의 자동 코드 분할과 관련이 있다고 생각합니다 🤔

Pytal 에 2020년 05월 07일

아마도 https://github.com/zeit/next.js/issues/10268 과 관련이

mzygmunt 에 2020년 05월 08일

👍1

구성 요소에 일반 CSS 모듈을 사용했으며 몇 ms 후에 스타일을 적용했습니다.

dani97 에 2020년 05월 27일

구성 요소에 일반 CSS 모듈을 사용했으며 몇 ms 후에 스타일을 적용했습니다.

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 에 2020년 05월 27일

구성 요소에 일반 CSS 모듈을 사용했으며 몇 ms 후에 스타일을 적용했습니다.
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 에 2020년 05월 28일

webdeb 에 2020년 05월 31일

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 에 2020년 06월 03일

👍6 😕1 👎1

이것은 next@^9.4.5-canary.15 에서 수정되어야합니다! 업그레이드하여 알려주십시오.

Timer 에 2020년 06월 22일

👍3 🎉2 👎1

@Timer , 나는 next@^9.4.5-canary.18 . 이제 CSS 깜박임이 개발 모드에서 나타나지 않지만 프로덕션 버전에서는 동일하게 유지됩니다. 프로덕션 버전에는 여전히 버그가 있습니다.

material-ui + css 모듈을 사용하고 있습니다.

이 문제에 직면 한 앱 버전은 다음과 같습니다. https://cluster-11-lwj6nmcgy.vercel.app/ .

Prottoy2938 에 2020년 06월 24일

👀1

@ Prottoy2938 여기도 마찬가지 입니다. 이 문제에 대한 의견을 남겼습니다. https://github.com/vercel/next.js/issues/13058#issuecomment -654165987

casperle 에 2020년 07월 06일

@Timer , 나는 next@^9.4.5-canary.18 . 이제 CSS 깜박임이 개발 모드에서 나타나지 않지만 프로덕션 버전에서는 동일하게 유지됩니다. 프로덕션 버전에는 여전히 버그가 있습니다.
material-ui + css 모듈을 사용하고 있습니다.
이 문제에 직면 한 앱의 버전은 cluster-11-lwj6nmcgy.vercel.app 입니다.

귀하의 사례는 CSS 모듈 / tailwind와 관련이 없으며 material-ui의 사전 렌더링 구현을 잊어 버리는 것과 관련이 있습니다 .https : //github.com/vercel/next.js/issues/7322#issuecomment -653858948

timneutkens 에 2020년 07월 06일

@casperle , 제 경우에는 서버 측 렌더링 을하고 있었기 때문에 문제가 발생했습니다. material-ui 에서이

Prottoy2938 에 2020년 07월 06일

v9.4.5-canary.28을 사용하면 dev에서 깜박이지 않고 프로덕션에서 깜박입니다.

talaikis 에 2020년 07월 06일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급