Next.js: 顺风+ CSS模块在开发中闪烁的样式

创建于 2020-05-03 · 13评论 · 资料来源: vercel/next.js

错误报告

描述错误

我正在将tailwindcss与css模块一起使用，并且我注意到页面第一次加载时，我的所有样式都没有加载。为了弄清楚发生了什么，我运行了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

最有用的评论

有解决此问题的解决方法
在HTML组件中创建一个自定义“ _document.js ”并添加类“ no-fouc ”
创建一个自定义“ _app.js ”，然后在“ componentDidMount ”中添加以下代码

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

Add在全局样式中添加以下样式：

.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模块，并在几毫秒后应用了样式。

dani97 于 2020-05-27

我在组件中使用了普通的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 于 2020-05-27

我在组件中使用了普通的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 ，Chrome

dani97 于 2020-05-28

webdeb 于 2020-05-31

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

Add在全局样式中添加以下样式：

.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 :

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模块/顺风无关，而更多与忘记实施Material-ui的预渲染有关： https :

timneutkens 于 2020-07-06

@casperle ，就我而言，问题是因为我在进行服务器端渲染。我遵循了Material-ui的这份

Prottoy2938 于 2020-07-06

使用v9.4.5-canary.28时，开发中不会闪烁，而生产中也不会闪烁。

talaikis 于 2020-07-06

此页面是否有帮助？

0 / 5 - 0 等级

Next.js: 顺风+ CSS模块在开发中闪烁的样式

错误报告

描述错误

重现

预期行为

屏幕截图

系统信息

最有用的评论

所有13条评论

相关问题