个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在将 Next.js 与 next-sass 一起使用。我一整天都在与一闪而过的无样式内容“FOUC”问题作斗争，测试了我在网上找到的各种解决方案，但似乎没有一个对我有用。当使用 CSS 转换时，这个问题尤其明显，因为组件将在没有任何样式的情况下可见，然后转换为其 CSS 样式。
仅当使用next build 然后使用next start 进行生产构建时，此信息才可见。在开发模式下，使用next，不存在FOUC问题。
最小示例:
// next.config.js
const withSass = require('@zeit/next-sass');
module.exports = withSass();
// scss/style.scss
body {
background-color: red;
transition: 2s all ease;
}
// pages/index.js
import React from "react";
import "../scss/style.scss";
const Home = () => (
<div>Test</div>
);
export default Home;
GitHub 存储库:https://github.com/jesperlindstrom/next-sass-fouc/
问题视频:https://drive.google.com/file/d/12yukgmgsuPKRs0TD2yYZK9F7fBC7oSkF/view?usp=sharing
我做错了什么？谢谢!
最佳答案
所以......这个问题原来是一个浏览器错误，与 Next 或 Webpack 完全无关。设法使用普通 CSS 和 HTML 进行复制，其中在加载时触发转换。该解决方案听起来很愚蠢，但解决了它:在您的 .js 文件中导入一个空的 .js 文件。我猜测它会使两个资源“阻塞”，因此等待第一次渲染......
如果有人在 Next.js 中遇到同样的问题，我会将其添加到我的 _document.js 中:
<Head>
...
<script src="/static/chrome-fix.js" />
</Head>
...并将 chrome-fix.js 作为空文件放入我的/static 中。
更多信息:https://bugs.chromium.org/p/chromium/issues/detail?id=332189
关于webpack - 下一个 sass : Flash of unstyled content only when building for production，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55316262/
25
4
0
这个问题我已经问了自己很长一段时间了，所以我决定在这里问你们。 假设我有一个 Shop 对象，其中包含一个 ProductList 对象作为实例变量。我的 Shop 对象的核心功能当然是能够添加 Pr
我正在做应用内购买功能。今天我遇到了一个奇怪的问题。 我尝试通过 SKProductsRequest 获取列表产品。问题是:有时我收到 invalidProductIdentifiers，但有时我收到
假设您有一个名为 Product 的表，它有一个自动编号/标识列。您将其简单命名为 Id 还是将其命名为 ProductId 或 Product_Id？请解释原因。 最佳答案 没有明确的答案，因为这取
假设我销售多个产品。有时，product 实际上是其他product 的组合。例如，假设我正在销售: 热狗 苏打水 热狗+汽水组合 我应该如何建模这样的东西？我是否应该有一个 product 表来列出
有人可以建议为用户可以购买某些产品的页面添加正确的 Schema.org 标记的最佳方法吗？我正在那里添加 Product 标签(用于 Rich Snippets)。 我想增加询问有关该产品的问题的可
我正在尝试在 xml 表中查找一些数据。 如果像这样删除命名空间，我可以从 xml 中获取数据: $nodes = $data->xpath('//Products/Product/produ
我很喜欢这个程序。有人可以告诉我我做错了什么吗？该程序提示用户输入产品目录中的产品数量。然后程序应提示用户输入产品目录中每个产品的名称和价格。输入所有产品后，程序应输出目录中最昂贵产品的产品信息(名称
我有一个表 product(id, name)，其中包含几组产品，型号不同。即 {motor10、motor20、motor30、pipe10、pipe20、pipe30、wrench12、wrenc
这里我声明了产品类变量并分配了它。 产品.java public class Product { String[] name= new String[100]; int price;
我在构建服务器之一上遇到此错误。所有其他服务器都可以正常构建。有什么想法可能是错误的吗？ 最佳答案 我也有此错误，它似乎是在创建新设置时从Wix自动生成的新事物。当我从3.5升级到3.6时，Wix不喜
我想在同一个模型中制作字段product.product 假设 A 取决于 lst_price of product.product . 如果用户未设置 A 的值，则取 lst_price 但如果用户
我有一个以类别和产品作为属性的列表，我希望将属于不同列表中的类别的所有产品分开。 目前我有这个 Products products = new Products(); products
我们正在构建一个网络数据库系统，我们需要允许某些产品由其他产品制成。例如，将 2 个或多个产品组合为新产品。我们正在使用 CakePhp 和 MySQL。 这是我们数据库的数据结构图: https:/
我想给这段代码添加样式: 我试着这样说: 'font-weight:bold;')); ?> 但它给我这个错误信息: 警告 (2):htmlspecialchars() 期望参数 4 为 bool
我正在使用 Ruby on Rails 构建一个主要用于存储产品的数据库。我主要关心的问题之一是，在未来，我希望能够知道这两种产品的兼容性。 我不知道如何以“Rails 方式”构建它。首先，我正在考虑
如果我错了，请纠正我，但据我从文档中理解， --env option ONLY 用于能够在 webpack.config.js 内访问它如果它导出一个函数，例如 module.exports = fu
我正在尝试将 Commerce 产品类型绑定(bind)到我自己的自定义类型节点(用作显示节点)。目标是在尽可能少的地方输入新数据。因此，我正在探索在创建另一种类型时基于规则创建一种类型。似乎两个方向
我想弄清楚如何重命名或翻译 /product/和 /product-category/ WooCommerce 中的蛞蝓。 我不想完全删除它们，我只想将它们重命名为 /lesson/和 /lesson
我在 Google Search Console 中收到一条警告，指出“未提供全局标识符(例如 gtin、mpn、isbn)”。问题是，我的产品没有这样的东西。关于如何向 Google 表明不存在此类
我正在寻找 Julia 中元素矩阵乘法的就地实现，又名 Schur 乘积，又名 Hadamard 乘积。 它可以通过 A .* B 分配来执行，但我不能在每次执行此操作时分配额外的内存。 当然我可以自
我是一名优秀的程序员,十分优秀！