NextJS项目中Mantine搭配SCSS模块样式加载延迟问题

问题根源 #

生产构建中，Mantine的主题样式通过CSS-in-JS（Emotion）内联注入到HTML头部，加载优先级高；而SCSS模块被Next.js提取为独立的外部CSS文件，通过<link>标签加载。当网络状况较差时，外部CSS文件加载滞后，就会出现Mantine样式先渲染、SCSS模块样式延迟生效的闪屏现象。

解决方案 #

1. 启用Next.js CSS优化配置

在next.config.js中开启CSS优化，压缩CSS体积并调整加载顺序，减少加载延迟：

module.exports = {
  experimental: {
    optimizeCss: true, // 启用CSS压缩与优化
  },
  sassOptions: {
    includePaths: ['./src/styles'], // 配置SCSS变量所在的上级目录，确保变量全局可访问
  },
};

2. 将SCSS模块样式迁移至CSS-in-JS（与Mantine统一）

既然Mantine基于Emotion实现样式，将SCSS模块的自定义样式转为Emotion语法，让样式与Mantine一起内联注入，彻底避免外部CSS文件的加载延迟：

// Header.tsx
import { css } from '@emotion/react';
import { useMantineTheme } from '@mantine/core';

const Header = () => {
  const theme = useMantineTheme();
  // 用Emotion的css函数定义原SCSS模块中的样式
  const headerStyles = css`
    background: ${theme.colors.gray[8]};
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  `;

  return <header css={headerStyles}>...</header>;
};

export default Header;

这种方式能让自定义样式与Mantine主题样式同步渲染，完全消除延迟。

3. 预加载SCSS模块对应的CSS文件

如果不想改动样式写法，可在页面的next/head中添加预加载标签，提前请求SCSS模块生成的CSS文件：

// 页面组件
import Head from 'next/head';

const HomePage = () => {
  return (
    <>
      <Head>
        {/* 替换为生产构建后SCSS模块对应的CSS文件路径，路径可在构建后的.next/static/css目录中查看 */}
        <link rel="preload" href="/_next/static/css/abc123.css" as="style" />
      </Head>
      <Header />
    </>
  );
};

注意：生产环境CSS文件名带哈希值，需根据实际构建结果调整路径，维护成本较高，仅作为临时方案。

4. 优化SCSS变量导入方式

使用@use替代@import导入SCSS变量，减少CSS冗余，提升编译与加载效率：

// Header.module.scss
@use '../styles/variables' as vars; // 替换为你的变量文件路径

.header {
  background: vars.$header-bg;
  padding: vars.$spacing-md;
}

推荐方案 #

优先采用方案1+方案2：通过Next.js CSS优化减少加载时间，同时将自定义样式与Mantine的CSS-in-JS方案统一，从根源上解决样式加载顺序问题，彻底消除闪屏现象。

内容的提问来源于stack exchange，提问作者James Finn