NextJS与ChakraUI生产环境CSS变量未定义问题求助

1. 禁用cssnano的变量名小写转换 #

NextJS生产构建默认会用cssnano压缩CSS，它的默认配置会将CSS变量名转为小写。你可以通过自定义配置修改这个行为：

• 在项目根目录创建postcss.config.js文件，添加以下内容：

module.exports = {
  plugins: {
    'postcss-preset-env': {},
    cssnano: {
      preset: [
        'default',
        {
          // 关键：禁用变量名小写转换
          lowercaseVariables: false,
          minifySelectors: false,
          reduceIdents: false
        }
      ]
    }
  }
};

如果使用NextJS新版本的SWC内置CSS处理，直接在next.config.js中配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    cssMinimizerOptions: {
      preset: [
        'default',
        {
          lowercaseVariables: false
        }
      ]
    }
  }
};

module.exports = nextConfig;

2. 检查ChakraUI主题配置一致性 #

确保主题配置和组件使用的命名规则统一，避免自定义主题时破坏变量生成逻辑：

• 打开主题配置文件（如theme.js），确认字体大小等配置使用驼峰命名：

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  fontSizes: {
    '5xl': '3rem', // 对应生成--chakra-fontSizes-5xl变量
  },
});

export default theme;

同时确认组件中正确使用Chakra的样式API：

import { Box } from '@chakra-ui/react';

const Page = () => {
  return <Box fontSize="5xl">Hello World</Box>;
};

3. 临时禁用SWC CSS压缩（应急方案） #

若上述配置无效，可临时关闭SWC的CSS压缩功能（不推荐长期使用，会影响构建性能）：
在next.config.js中添加：

const nextConfig = {
  swcMinify: false,
};

module.exports = nextConfig;

4. 排查第三方PostCSS插件影响 #

如果项目中混用了其他CSS框架（如TailwindCSS），检查相关PostCSS插件是否会修改CSS变量大小写，调整插件执行顺序或禁用变量转换相关配置。

内容的提问来源于stack exchange，提问作者Ade Indriawan