在 NextJS 中导入使用“文档”的 CSS 辅助函数答案

【问题标题】：Importing CSS helper function that uses 'document' in NextJS在 NextJS 中导入使用“文档”的 CSS 辅助函数
【发布时间】：2021-02-20 02:39:09
【问题描述】：

我正在使用样式化组件。我想导入一个有助于创建流畅样式的函数。我的函数使用以下内容：

const root = document.querySelector('html');
const pixelsPerRem = Number(getComputedStyle(root).fontSize.slice(0, -2));

当我使用导入我的函数时

`const clampBuilder = dynamic(() => import('utils/clampBuilder'), {
 ssr: false,
});`

我看到clampBuilder is not a function。据我了解，由于 NextJS 是 SSR，因此没有 document。我想知道如何导入我的辅助函数或以某种方式使用它来计算我需要的内容。

【问题讨论】：

【解决方案1】：

我最终从函数中删除了上面显示的两行并将pixelsPerRem 设置为 16，因为这是大多数浏览器的默认值。它可能并不完美，但已经足够了！

【讨论】：

【解决方案2】：

上述错误表明您的clampBuilder is not a function 似乎与 SSR 或文档没有任何问题。

您可以尝试如下更新动态导入：

const clampBuilder = dynamic(import('utils/clampBuilder'), { ssr: false })

【讨论】：