Не отображаются стили после билда в React с MUI

Question

Столкнулся с такой проблемой - я забилдил свой проект на реакт, а стили не отображаются. Вообще нет моих стилей только компоненты mui, их стили и голый html. Точнее стили отображаются, но только если я залезу в Source браузера, в файл стилей(да, файл стилей числится в браузере) и что то туда напишу. Не важно что, хоть пробел просто поставлю.То есть как я уже и сказал стили отображаются и все работает, но только при этом условии. JS сразу работает без дополнительных махинаций в исходном коде.

Я использую Nginx чтобы обслуживать статические файлы.

http {
    server {
        listen 80;
        server_name localhost;

        location / {
            root /usr/share/nginx/html;
            try_files $uri /index.html;
        }

Как в заголовке написано - я использую MUI для интерфейса. Стили я пишу на SCSS. У меня для каждого компонента реакта свой файл SCSS который я подключаю через import "...". В index.jsx лежит main.scss, подключение шрифта и обнуление стилей. Мой index:

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';
import '@fontsource/open-sans';
import './assets/styles/main.scss';
import 'normalize.css';

const rootElement = document.getElementById('root');

if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <React.StrictMode>
      <Provider store={store}>
        <ThemeProvider>
          <App />
        </ThemeProvider>
      </Provider>
    </React.StrictMode>,
  );
} else {
  console.error('Root element not found');
}

reportWebVitals();

Ещё из интересного - в момент, когда я что то делаю в source в файле моих стилей, делается запрос к nginx и браузер запрашивает шрифт(Я убирал шрифты и билдил без них. В итоге он просто переставал их запрашивать).

Первое что я сделал - это сказал браузеру не кэшировать

location / {
    root /usr/share/nginx/html;
    try_files $uri /index.html;
    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
    expires off;
}

Далее убирал стили, шрифты, менял вид ссылки, удалял ссылку, обновлял зависимости ну и так далее.

Не знаю, что ещё написать. Буду дополнять по требованию!

БЛОГ НА HUSL

Не отображаются стили после билда в React с MUI

Ответы (0 шт):