Next.js项目SCSS样式生产构建模式下未生效问题

问题现象 #

• 本地执行npm run dev启动开发环境时，spinning-wheel转盘组件渲染完全正常
• 执行npm run build完成生产构建后，通过npm start启动服务时组件出现样式错乱，所有转盘切片堆叠在一起
• 效果对比：
  • 开发模式（正常效果）：
    
  • 生产构建模式（异常效果）：
    

问题原因 #

Next.js生产构建默认使用cssnano做CSS压缩，其默认开启的cssVariables（变量归约）优化会做静态代码分析：如果它在CSS/SCSS文件里检测到某个CSS变量被赋值为静态常量，就会直接把所有引用该变量的地方替换成对应的常量值，完全感知不到JSX里通过内联style动态传入的变量覆盖逻辑。
代码中--nb-item、--item-nb、--selected-item这几个需要动态赋值的CSS变量，在SCSS里都写了静态初始值，被cssnano直接替换成了初始值0，导致calc旋转角度、切片宽度计算全部出错，最终所有切片堆叠在同一位置。
另外SCSS代码里圆周率变量值写错了：--PI: 3.60应为--PI: 3.1416，这个问题会导致转盘切片出现宽度不均、缝隙问题。

修复方案 #

方法1：修改构建配置（推荐，一劳永逸） #

打开项目根目录的next.config.js（或next.config.mjs），添加配置关闭cssnano的CSS变量静态替换优化：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.optimization.minimizer.forEach((minimizer) => {
      if (minimizer.constructor.name === 'CssMinimizerPlugin') {
        minimizer.options.minimizerOptions = {
          preset: [
            'default',
            {
              cssVariables: false, // 禁止压缩时静态替换CSS变量
            }
          ]
        }
      }
    })
    return config
  }
}

module.exports = nextConfig

方法2：代码层规避（不修改构建配置） #

把所有需要动态传入的CSS变量从SCSS的静态样式里移除初始值，同时在JSX里传值时显式转为字符串类型：

1. 删除SCSS中.board-arisan-container下的--nb-item: 0;、--item-nb: 0;、--selected-item: 0;三个静态初始值
2. 修改JSX中内联style的变量传值，把数字转为字符串：

const wheelVars = {
  '--nb-item': String(props.items.length),
  '--selected-item': String(selectedItem ?? 0),
}

// 轮播项内联样式
style={{
  '--item-nb': String(index),
  color: '#ffad00',
  fontSize: 30,
  fontWeight: 'bolder',
}}

3. 修正SCSS中的圆周率值：把--PI: 3.60;改为--PI: 3.1416;

验证 #

修改完成后删除.next缓存目录，重新执行npm run build构建，再通过npm start启动生产服务，转盘样式即可恢复正常，和开发环境表现一致。

内容的提问来源于stack exchange，提问作者Duma Doniagara