React+MUI项目构建后自定义SCSS样式不显示问题求助

可能原因1：Nginx静态资源路由与缓存配置不精准 #

虽然你已经添加了全局缓存禁用规则，但可以针对静态资源单独配置，避免SPA路由 fallback 逻辑干扰样式文件的正常加载：
修改Nginx配置如下：

http {
    server {
        listen 80;
        server_name localhost;

        # 单独处理CSS、JS、字体等静态资源
        location ~* \.(css|js|woff2|woff|ttf|svg|png|jpg)$ {
            root /usr/share/nginx/html;
            add_header Cache-Control "no-store, no-cache, must-revalidate";
            expires off;
        }

        # SPA路由 fallback 仅处理非静态资源请求
        location / {
            root /usr/share/nginx/html;
            try_files $uri /index.html;
        }
    }
}

同时查看Nginx的access.log，确认自定义样式文件的请求返回码为200，且响应内容是正确的CSS代码。

可能原因2：全局样式加载顺序滞后 #

当前你在index.jsx中的样式导入位置靠后，可能导致React渲染组件时，自定义样式尚未完成解析。调整导入顺序，让全局样式最先加载：

// index.jsx 调整后的导入顺序
import './assets/styles/main.scss';
import 'normalize.css';
import '@fontsource/open-sans';

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './redux/store';
import { ThemeProvider } from './assets/styles/theme/ThemeContext';

确保DOM渲染前，全局CSS已完成解析并加入CSSOM。

可能原因3：CSSOM未触发重绘 #

浏览器加载样式后，若未触发CSSOM重计算，可能导致自定义样式不生效。可以在App组件中添加强制重绘逻辑：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 强制浏览器触发CSSOM重计算与重绘
    document.body.style.display = 'none';
    document.body.offsetHeight; // 触发重排
    document.body.style.display = '';
  }, []);

  // ... 组件原有代码
}

可能原因4：构建工具的CSS编译问题 #

尝试清理构建缓存后重新编译部署，避免旧的编译产物干扰：

rm -rf node_modules build package-lock.json
npm install
npm run build

如果是自定义webpack配置，检查mini-css-extract-plugin是否正确配置，确保SCSS编译后的CSS文件被正确提取、注入。

额外检查点 #

• 打开浏览器Network面板，筛选CSS文件，确认自定义样式文件的Content-Type响应头为text/css，且文件内容完整。
• 检查自定义ThemeProvider的实现，是否存在动态覆盖全局样式或延迟注入样式的逻辑，导致自定义SCSS被隐藏。

内容的提问来源于stack exchange，提问作者Евгений Засецкий