开发与生产环境CSS导入顺序不一致致MUI样式覆盖问题求助

问题核心 #

开发环境（npm run dev）样式加载顺序：自定义SCSS → 自定义MUI主题 → 组件样式，自定义样式正常生效；
生产环境（npm run build + npm run start）加载顺序变为：自定义MUI主题 → 组件样式 → 自定义SCSS，导致自定义SCSS被MUI默认样式覆盖，调整_app.tsx中导入顺序无效。

可行解决方案 #

1. 利用MUI的StyledEngineProvider调整样式注入优先级 #

在_app.tsx中使用StyledEngineProvider并设置injectFirst，让MUI样式先注入，确保自定义SCSS能覆盖默认样式：

import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
import theme from '../styles/muiTheme';
import '../styles/styles.scss';

export default function MyApp({ Component, pageProps }) {
  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={theme}>
        <Component {...pageProps} />
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

2. 直接在MUI主题中覆盖样式 #

放弃全局SCSS的方式，在自定义主题的styleOverrides中直接定义组件样式，优先级高于MUI默认样式：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  // 基础主题配置
  palette: {
    primary: { main: '#1976d2' },
  },
  // 针对组件覆盖样式
  styleOverrides: {
    MuiButton: {
      root: {
        borderRadius: '8px',
        textTransform: 'none',
      },
    },
    // 其他组件样式覆盖
  },
});

export default theme;

3. 修改Next.js webpack配置强制SCSS加载顺序 #

在next.config.js中调整sass-loader的执行顺序，确保自定义SCSS在最后编译：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 定位SCSS加载规则
    const sassRule = config.module.rules.find(rule => rule.test?.test('.scss'));
    if (sassRule) {
      // 设置为后置处理，确保SCSS样式最后注入
      sassRule.enforce = 'post';
    }
    return config;
  },
};

module.exports = nextConfig;

4. 提升自定义SCSS选择器优先级 #

在自定义SCSS中使用更具体的选择器（比如结合组件类名），或在必要样式后添加!important（仅推荐局部使用）：

// 更具体的选择器
.MuiButton-root.custom-btn {
  border-radius: 8px;
}

// 必要时使用!important
.custom-btn {
  background-color: #ff0000 !important;
}

相关社区问题背景 #

Next.js社区中存在多起类似的生产环境样式顺序异常案例，核心原因是开发与生产环境的webpack编译策略差异，导致样式打包顺序发生变化，部分场景下调整导入顺序无法影响最终编译结果。

内容的提问来源于stack exchange，提问作者bas verdoorn