我正在使用Mantine构建一个NextJS项目，并使用SCSS模块应用我们自己的自定义样式。使用Typescript。一切似乎都很好，但是当查看构建版本（而不是开发版本）时，样式在组件上生效的顺序被延迟了。在HTML上应用的SCSS模块中存在明显的延迟。我不知道是什么导致了这种情况的发生。
当页面加载时，它看起来像是事件的顺序：

1. Mantine主题和内联CSS样式应用于HTML [！[应用SCSS样式模块前的按钮][1]][1]
   1.明显的延迟[！[应用SCSS样式模块后的按钮][2]][2]
2. SCSS模块样式应用于HTML
   对于糟糕的网络连接，这种延迟非常明显。
   以下是NextJS React项目的一些注解和代码：
   SCSS模块存储在组件tsx文件旁边，并且还使用位于父文件夹中的scss变量。

Header.tsx
Header.modules.scss

Header代码的示例如下所示：

Header.tsx

import Link from 'next/link';
import styles from './Header.module.scss';
import { Button } from '@ui/Button/Button';
import { UserCircleIcon } from '@heroicons/react/24/outline';

const Header: React.FC = () => {
  return (
            <Link
              href={www.a.com})}
              passHref
            >
              <Button
                type="button"
                component="a"
                color="gray.1"
                shape="rounded-xl"
                className={[styles.RoundedButton, styles.HeaderButton].join(' ')}
              >
                <UserCircleIcon className={styles.Icon} />
                <span className={styles.RoundedButtonText}>Log In</span>
              </Button>
            </Link>     
  );
};

export default Header;

Header.module.scss

@import 'variables.module.scss';
@import 'uiBreakPoints.module.scss';

.HeaderButton {
  padding: 0 $spacing-sm;
}
.RoundedButton {
  color: $black;
  @include max-media($ui-break-sm) {
    // TODO: Remove !important when SCSS Module fix
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
  }
}
.RoundedButtonText {
  margin-left: $spacing-2xs;
  @include max-media($ui-break-md) {
    display: none;
  }
}

next.config.js

const { withSentryConfig } = require("@sentry/nextjs");
const path = require('path');

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
  i18n: {
    locales: ['en-US'],
    defaultLocale: 'en-US',
  },
  env: {
    PUSHER_KEY: process.env.PUSHER_KEY,
    PUSHER_CLUSTER: process.env.PUSHER_CLUSTER,
    PUSHER_APP_ID: process.env.PUSHER_APP_ID,
    PUSHER_SECRET: process.env.PUSHER_SECRET,
  },
  // Optional build-time configuration options
  sentry: {
    // See the 'Configure Source Maps' and 'Configure Legacy Browser Support'
    // sections below for information on the following options:
    //   - disableServerWebpackPlugin
    //   - disableClientWebpackPlugin
    //   - hideSourceMaps
    //   - widenClientFileUpload
    //   - transpileClientSDK
  },
  experimental: {
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'cdn.filestackcontent.com',
        },
      ],
    },
  },
}

const sentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  //   release, url, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore

  silent: true, // Suppresses all logs
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
};

module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions)``` 

  [1]: https://i.stack.imgur.com/luG0p.png
  [2]: https://i.stack.imgur.com/JhhYK.png